/* ============================================================
   tokens.css — single source of truth for design tokens
   ------------------------------------------------------------
   Loaded AFTER home-v8.css / case.css / nav.css so its values
   win. Component stylesheets keep their own :root fallbacks so
   they still work in isolation; this file is the canonical set.

   Layers:
     1. Master surface — change --site-bg to retheme the page.
     2. Color · brand, accent, ink, surface (primitive values).
     3. Color · semantic — components reference these names.
     4. Type · families and scale tokens.
     5. Spacing · 4px scale.
     6. Radius · scale.
     7. Shadow · brutalist offset + soft lift.
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     1. Master surface — change --site-bg to retheme everything
     ------------------------------------------------------------ */
  --site-bg:               #fcfcfb;
  --canvas:                var(--site-bg);  /* home-v8.css alias */
  --paper:                 var(--site-bg);  /* legacy alias */

  /* ------------------------------------------------------------
     2. Color · brand + accent (primitive)
     ------------------------------------------------------------ */
  --primary:               #1F4D3A;   /* Forest */
  --primary-active:        #143426;
  --primary-soft:          #B4CDC0;
  --primary-tint:          rgba(31, 77, 58, 0.08);

  --cs-accent:             #87C9A6;   /* mint accent, on-dark only */

  /* Ink scale */
  --ink:                   #141413;
  --body-strong:           #252523;
  --body:                  #3d3d3a;
  --muted:                 #6c6a64;
  --muted-soft:            #8e8b82;

  /* Light surfaces */
  --surface-soft:          #f4f3ee;
  --surface-card:          #ece9e0;
  --surface-cream-strong:  #e2dccf;
  --hairline:              #e7e3da;
  --hairline-soft:         #eeebe3;

  /* Dark surfaces */
  --surface-dark:          #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft:     #1f1e1b;
  --hairline-dark:         #2f2d29;
  --on-dark:               #faf9f5;
  --on-dark-soft:          #a09d96;
  --on-dark-faint:         #6c6a64;
  --on-primary:            #ffffff;

  /* ------------------------------------------------------------
     3. Color · semantic (NEW — components should reference these)
        Values previously hardcoded in home-v8.css are now named.
     ------------------------------------------------------------ */
  --surface-quote:         #e9e8e4;   /* press-card, reel-card-fb resting */
  --surface-quote-hover:   #dedcd6;   /* press-card hover */
  --surface-shot:          #f3f2f9;   /* cs-shot photo backdrop (cool) */
  --surface-shot-warm:     #e9e7f3;   /* photo-cover light + cs-shot end stop */
  --on-dark-strong:        #f9f4e9;   /* about emphasis on dark */
  --on-dark-warm:          #8b8579;   /* about body copy on dark (warm gray) */
  --success:               #5db872;   /* status / positive (only status color) */

  /* ------------------------------------------------------------
     4. Type · families
     ------------------------------------------------------------ */
  --font-display:          'VT323', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-heading:          system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:             'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (advisory — most usage is still hand-tuned per component) */
  --t-display-xl:          clamp(58px, 8vw, 104px);
  --t-display-lg:          clamp(44px, 6vw, 78px);
  --t-display:             clamp(42px, 5.6vw, 66px);
  --t-heading-xl:          clamp(34px, 3.4vw, 54px);
  --t-heading:             26px;
  --t-body-lg:             18px;
  --t-body:                16px;
  --t-caption:             13px;
  --t-eyebrow:             11px;

  /* ------------------------------------------------------------
     5. Spacing · 4px scale (advisory; mix with hand values where
        a component's geometry demands it).
     ------------------------------------------------------------ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ------------------------------------------------------------
     6. Radius
     ------------------------------------------------------------ */
  --r-sharp: 0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    18px;
  --r-2xl:   28px;
  --r-pill:  9999px;

  /* ------------------------------------------------------------
     7. Shadow
     ------------------------------------------------------------ */
  --sh-brutalist:    7px 7px 0 var(--ink);
  --sh-brutalist-sm: 4px 4px 0 var(--ink);
  --sh-lift:         0 18px 44px -20px rgba(20, 20, 19, 0.4);
  --sh-polaroid:     0 14px 28px -10px rgba(0, 0, 0, 0.45);
}

/* Defensive: enforce site bg at the body level. */
html, body { background: var(--site-bg); }