/*
 * Tracy Harris Co Brand Kit — Token Layer
 *
 * Three layers:
 *  1. :root — primitives (raw hex, font families, scale). Never reference from components.
 *  2. [data-brand="X"] — brand mappings to semantic names (surface, ink, accent).
 *  3. Components — reference semantic tokens only (var(--surface-canvas), etc).
 *
 * To switch brand on any page fragment: add data-brand="tracy|ffb|ffm|fresh".
 */

/* ---------- 1. PRIMITIVES ---------- */

:root {
  /* Neutrals */
  --p-charcoal: #101010;
  --p-ink: #313131;
  --p-mute: #727272;
  --p-oatmeal: #f6f4f1;
  --p-cream: #ece7de;
  --p-white: #ffffff;
  --p-black: #000000;

  /* Greens */
  --p-aztek: #1e3735;
  --p-ffb-dark: #1e3735;
  --p-sage: #6e8e77;

  /* Golds (FFM) */
  --p-gold-dark: #7b623c;
  --p-gold-mid: #c9a46c;

  /* FRESH palette */
  --p-fresh-navy: #20314c;
  --p-fresh-orange: #ca6b4d;
  --p-fresh-yellow: #ddab7d;
  --p-fresh-peach: #cc9989;

  /* Font families */
  --f-serif-display: 'Editors Note', Georgia, serif;
  --f-serif-italic: 'Editors Note', Georgia, serif;
  --f-script: 'Jhon Halend', cursive;
  --f-sans: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Sizes */
  --s-xs: 12px;
  --s-sm: 13px;
  --s-base: 15px;
  --s-md: 16px;
  --s-lg: 18px;
  --s-xl: 24px;
  --s-2xl: 28px;
  --s-3xl: 32px;
  --s-4xl: 35px;
  --s-5xl: 48px;
  --s-6xl: 60px;
  --s-7xl: 72px;
  --s-8xl: 96px;

  /* Tracking */
  --t-tight: -0.01em;
  --t-normal: 0;
  --t-wide: 0.1em;
  --t-wider: 0.15em;
  --t-widest: 0.2em;

  /* Leading */
  --l-tight: 1.1;
  --l-snug: 1.3;
  --l-normal: 1.5;
  --l-relaxed: 1.65;

  /* Space scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Radii */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 9999px;
}

/* ---------- 2. SEMANTIC BRAND MAPPINGS ---------- */

/* Default = Tracy Harris Co (parent) */
:root,
[data-brand="tracy"] {
  --surface-canvas: var(--p-white);
  --surface-elevated: var(--p-oatmeal);
  --surface-inverse: var(--p-aztek);

  --ink-heading: var(--p-charcoal);
  --ink-body: var(--p-ink);
  --ink-mute: var(--p-mute);
  --ink-inverse: var(--p-white);

  --accent: var(--p-aztek);
  --accent-on: var(--p-white);
  --accent-hover: var(--p-sage);

  --border-hairline: rgba(16, 16, 16, 0.08);
  --border-divider: var(--p-aztek);

  --type-display-family: var(--f-serif-display);
  --type-display-color: var(--ink-heading);
  --type-subheading-color: var(--ink-heading);
}

[data-brand="ffb"] {
  --surface-canvas: var(--p-oatmeal);
  --surface-elevated: var(--p-cream);
  --surface-inverse: var(--p-ffb-dark);

  --ink-heading: var(--p-charcoal);
  --ink-body: var(--p-ink);
  --ink-mute: var(--p-mute);
  --ink-inverse: var(--p-oatmeal);

  --accent: var(--p-ffb-dark);
  --accent-on: var(--p-oatmeal);
  --accent-hover: var(--p-sage);
  --accent-warmth: var(--p-fresh-peach);

  --border-hairline: rgba(36, 53, 49, 0.12);
  --border-divider: var(--p-ffb-dark);

  --type-display-family: var(--f-serif-display);
  --type-display-color: var(--p-ffb-dark);
  --type-subheading-color: var(--p-ffb-dark);
  --type-script-family: var(--f-script);
  --type-script-color: var(--p-sage);
}

[data-brand="ffm"] {
  --surface-canvas: var(--p-oatmeal);
  --surface-elevated: var(--p-white);
  --surface-inverse: var(--p-charcoal);

  --ink-heading: var(--p-charcoal);
  --ink-body: var(--p-ink);
  --ink-mute: var(--p-mute);
  --ink-inverse: var(--p-oatmeal);

  --accent: var(--p-gold-dark);
  --accent-light: var(--p-gold-mid);
  --accent-gradient: linear-gradient(135deg, var(--p-gold-dark) 0%, var(--p-gold-mid) 100%);
  --accent-on: var(--p-oatmeal);
  --accent-hover: var(--p-gold-mid);

  --border-hairline: rgba(16, 16, 16, 0.1);
  --border-divider: var(--p-gold-dark);

  --type-display-family: var(--f-serif-display);
  --type-display-color: var(--ink-heading);
  --type-subheading-color: var(--accent);
  --type-script-family: var(--f-script);
  --type-script-color: var(--accent);
}

[data-brand="fresh"] {
  --surface-canvas: var(--p-oatmeal);
  --surface-elevated: var(--p-white);
  --surface-inverse: var(--p-aztek);

  --ink-heading: var(--p-aztek);
  --ink-body: var(--p-ink);
  --ink-mute: var(--p-mute);
  --ink-inverse: var(--p-oatmeal);

  --accent: var(--p-aztek);
  --accent-on: var(--p-oatmeal);
  --accent-hover: var(--p-fresh-orange);

  --pillar-fitness: var(--p-fresh-orange);
  --pillar-relationships: var(--p-fresh-yellow);
  --pillar-environment: var(--p-fresh-peach);
  --pillar-self: var(--p-sage);
  --pillar-hustle: var(--p-aztek);

  --border-hairline: rgba(30, 55, 53, 0.12);
  --border-divider: var(--p-aztek);

  --type-display-family: var(--f-serif-display);
  --type-display-color: var(--ink-heading);
  --type-subheading-color: var(--ink-heading);
}

/* ---------- 4. GLOBAL GUARDRAILS ----------
   Prevent horizontal scroll + rubber-band bounce on mobile.
   Any element wider than the viewport gets clipped here.
   Scope overflow-x: auto inside a wrapper if horizontal scroll is wanted. */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  max-width: 100vw;
}
img, svg, video, iframe {
  max-width: 100%;
}