/*
 * 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: #243531;
  --p-sage: #6e8e77;
  --p-sage-alt: #788E75;

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

  /* Warms (FFB accents) */
  --p-coral: #EF673E;
  --p-copper: #AD765B;
  --p-dusty-rose: #CC9989;

  /* 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: 'Chic Societe Script', 'Jhon Halend', cursive;
  --f-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --f-sans-label: 'Public Sans', 'Poppins', system-ui, 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%;
}

/* ---------- 5. SCRIPT ACCENT UTILITY ----------
   Chic Societe Script has low ink density per glyph. Under 40px it turns
   to mush. This utility class enforces the minimum + colour contrast.
   Rule: use .tk-script-accent instead of inlining font-family + size.
   See docs/brand-rules.md rule #6 for when to use (and when to skip). */
.tk-script-accent {
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  color: var(--type-script-color, var(--p-copper));
  /* Default: fits under an h2 (~32-48px). Override with .tk-script-accent--hero on a big-display page. */
  font-size: clamp(32px, 2.4vw, 40px);
  letter-spacing: -0.005em;
}
.tk-script-accent--hero {
  /* Used under a display h1 >= 60px. Sits proud without dominating. */
  font-size: clamp(44px, 3.4vw, 56px);
}
.tk-script-accent--mini {
  /* Absolute floor. Only for tiny callouts where a script is essential but space is tight.
     If you find yourself reaching for this, consider dropping the script entirely. */
  font-size: clamp(28px, 2vw, 32px);
}
@media (max-width: 640px) {
  /* Never smaller than 28px on mobile, even on the mini variant */
  .tk-script-accent { font-size: max(32px, var(--_min, 32px)); }
  .tk-script-accent--hero { font-size: 40px; }
  .tk-script-accent--mini { font-size: 28px; }
}