/* ==========================================================================
   TaLedi design tokens - the one shared token file.

   Implements website/taledi-DESIGN.md section 2 (palette), section 2A (token
   architecture) and section 3 (type roles). The design file decides, this
   file follows: edit taledi-DESIGN.md first, then this file, then run
   production/design-system-rollout/tools/token_drift.py.

   Three layers, one direction of travel:
     1. Primitives  raw palette steps (--moss-500). Never applied in a rule,
                    only pointed at by the layers below.
     2. Semantic    the job a value does (--surface-page, --text-body).
     3. Legacy      every custom-property name the live site used before this
                    file existed (--off, --warm, --navy ...), aliased so each
                    resolves to exactly the value the site had. They are
                    migration scaffolding and retire name by name once a grep
                    shows zero uses (design file 2A, Migration order, pass 4).

   Values here are byte-for-byte what the live :root held on 2026-10-18, so
   linking this file in place of the page's own :root changes nothing. Where
   the design file and the live site disagree on a value, this file keeps the
   LIVE value. The disagreements are listed in the P2 report for Scott.

   Rules:
   - No @import and no @font-face: this file only NAMES font families. Each
     surface loads its own fonts.
   - No brand or product names in token names (design file 2A, Naming rules).
   - Hex is lowercase to match the live file (the one exception, --ts-gold, is uppercase in the live file too).
   - Link it before the page's own <style> so the page can still override.
   ========================================================================== */

:root {

  /* ======================================================================
     LAYER 1 - PRIMITIVES (design file 2A, Layer 1)
     More white = lower number, more black = higher number. Only steps that
     have a hex in design file section 2 exist; the rest are TBD, not invented.
     ====================================================================== */
  --moss-500:     #3e5c3a;   /* Deep Moss */
  --moss-700:     #2f4a2c;   /* pressed / hover-deepen moss */
  --sage-400:     #8cb68b;   /* Sage Accent */
  --lichen-500:   #808777;   /* Site Sage, body text (the legacy --sage) */
  --cream-200:    #e5e3dc;   /* cool cream */
  --cream-300:    #dddcd9;   /* cool paper */
  --harbour-700:  #1b2b1e;   /* deep-forest mid surface */
  --harbour-800:  #16241a;   /* primary dark surface */
  --harbour-900:  #0f1810;   /* near-black forest */
  --forest-600:   #004537;   /* deepest green accent */
  --stone-200:    #c9c2b0;   /* hairlines on light */
  --stone-600:    #635a4a;   /* captions, metadata */
  --stone-700:    #4a4438;   /* secondary text, basalt paper */
  --stone-900:    #221c16;   /* strong body text, warm near-black */
  --coral-500:    #d88b6a;   /* watch-out highlight */
  --cedar-500:    #a65a3a;   /* Cedar, the human-voice accent (new 2026-10-18) */
  --white:        #ffffff;   /* plain primitive; also the live legacy name */


  /* ======================================================================
     LAYER 2 - SEMANTIC (design file 2A, Layer 2)
     What components and pages consume. Names say the job, never the colour.
     ====================================================================== */

  /* Surface */
  --surface-page:         var(--cream-200);
  --surface-paper:        var(--cream-300);
  --surface-card:         var(--white);
  --surface-dark:         var(--harbour-800);
  --surface-deepest:      var(--harbour-900);
  --surface-dark-raised:  var(--harbour-700);
  --surface-brand:        var(--moss-500);
  --surface-panel:        rgba(37,56,42,0.74);   /* translucent forest panel; base colour not in a ramp yet (TBD) */
  --surface-glass:        rgba(62,92,68,0.66);   /* glass overlay; base colour not in a ramp yet (TBD) */

  /* Text */
  --text-body:       var(--lichen-500);
  --text-strong:     var(--stone-900);
  --text-secondary:  var(--stone-700);
  --text-muted:      var(--stone-600);
  --text-heading:    var(--moss-500);
  --text-on-dark:    var(--white);

  /* Border */
  --border-default:  var(--stone-200);
  --border-brand:    var(--moss-500);
  --border-accent:   #808080;   /* flat grey, as the live --ui-accent-rule; design file marks the target TBD */

  /* Action */
  --action-primary:        var(--moss-500);
  --action-primary-hover:  var(--moss-700);

  /* Accent */
  --accent-primary:  var(--sage-400);
  --accent-soft:     color-mix(in srgb, var(--accent-primary) 18%, transparent);
  --accent-forest:   var(--forest-600);
  --accent-voice:    var(--cedar-500);   /* a person speaking; never links, buttons, active states or eyebrows */

  /* Status */
  --status-watch:    var(--coral-500);


  /* ======================================================================
     NON-COLOUR FAMILIES (design file 2A "Non-colour families", section 3 / 5)
     New names, unused by any surface yet.
     ====================================================================== */

  /* Font family: the four roles. Short names --font-d / --font-b / --font-s /
     --font-m are the live handles (see Legacy). Stacks only; no font loading.
     Display and body keep the LIVE stacks; the design file lists a longer
     Inter fallback (see P2 report). */
  --font-display:  'Space Grotesk', Arial, sans-serif;
  --font-body:     'Inter', Arial, sans-serif;
  --font-voice:    Fraunces, Georgia, 'Times New Roman', serif;
  --font-label:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Type scale (prefix --font-size-, so --text-* stays colour-only) */
  --font-size-2xs:             0.6875rem;
  --font-size-xs:              0.75rem;
  --font-size-sm:              0.8125rem;
  --font-size-md:              0.875rem;
  --font-size-lg:              0.9375rem;
  --font-size-body:            1rem;
  --font-size-card-title:      1.1rem;   /* design file allows 1.1rem to 1.19rem, "pick one": low end, Scott to confirm */
  --font-size-quote:           clamp(1.25rem, 2vw, 1.625rem);     /* pull quote, section 3 */
  --font-size-note:            clamp(1.125rem, 1.6vw, 1.375rem);  /* director's note, section 3 */
  --font-size-display-product: clamp(1.5rem, 3vw, 2.5rem);
  --font-size-display-section: clamp(1.75rem, 3vw, 2.75rem);
  --font-size-display-closing: clamp(2rem, 4.5vw, 3.75rem);
  --font-size-display-chapter: clamp(2.5rem, 5.5vw, 5.25rem);
  --font-size-display-hero:    clamp(2.75rem, 6vw, 6rem);

  /* Radius ladder. No 8px to 16px step, on purpose. */
  --radius-none:    0;
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-circle:  50%;
  --radius-pill:    999px;   /* dark-surface overlay chips only */

  /* Text on dark: white stepped down by opacity */
  --alpha-on-dark-body:        0.55;
  --alpha-on-dark-meta:        0.45;
  --alpha-on-dark-meta-faint:  0.38;
  --alpha-on-dark-whisper:     0.28;

  /* Motion */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-intro:  cubic-bezier(0.76, 0, 0.24, 1);   /* intro overlay, section 4 */
  --duration-fast:     150ms;
  --duration-base:     220ms;
  --duration-slow:     350ms;
  --duration-stagger:  150ms;
  --duration-intro:    1600ms;

  /* Spacing: the live 4pt scale, unchanged (design file section 5) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s12:48px;
  --s14:56px; --s16:64px; --s20:80px; --s24:96px;

  /* Layout */
  --nav-h: 119px;   /* two-tier header: brand row + nav row. JS keeps it exact (inline on <html>). 57px at 768px and below, see the media query at the end. */


  /* ======================================================================
     LEGACY NAMES - every custom property the live site :root defined, in the
     order the site declared them. Aliases of the layers above; each resolves
     to the value the site had on 2026-10-18.
     ====================================================================== */

  /* Core forest spine and neutrals */
  --navy:         var(--moss-500);          /* NOT navy: Deep Moss. Collision with --deep and --green; resolve by job in pass 3 */
  --harbour:      var(--surface-dark);
  --green:        var(--action-primary);
  --green-bright: var(--green);
  --green-hover:  var(--action-primary-hover);
  --forest:       var(--accent-forest);
  --warm:         var(--accent-primary);    /* misnomer: sage, not warm */
  --warm-cream:   var(--surface-paper);
  --charcoal:     var(--text-strong);
  --basalt:       var(--text-secondary);
  --stone:        var(--text-muted);
  --sage:         var(--text-body);         /* resolves to --lichen-500 (grey-green text), never the sage ramp */
  --border:       var(--border-default);
  --off:          var(--surface-page);
  --deep:         var(--moss-500);          /* NOT near-black: Deep Moss. Near-black is --surface-deepest / --ui-depth */

  /* Theme set the Theme Studio edits. The accent and lime aliases keep the
     live chain through --warm / --green so a Studio override of those still
     cascades into them. */
  --ui-depth:       var(--surface-deepest);
  --ui-mid:         var(--surface-dark-raised);
  --ui-surface:     var(--surface-panel);
  --ui-glass:       var(--surface-glass);
  --ui-glass-soft:  #808080;                 /* flat grey; design file 2A leaves the semantic target TBD */
  --ui-paper:       var(--stone-700);        /* basalt paper; design file 2A "TBD, verify": verified #4a4438 live */
  --ui-paper-soft:  var(--stone-700);
  --ui-paper-mute:  #808080;                 /* flat grey; target TBD */
  --ui-accent:      var(--warm);
  --ui-accent-2:    var(--warm);
  --ui-accent-soft: color-mix(in srgb, var(--warm) 18%, transparent);
  --ui-accent-rule: #808080;                 /* flat grey; target TBD (--border-accent) */
  --ui-lime:        var(--green);
  --ui-lime-2:      var(--green);
  --accent:         var(--ui-accent);        /* site-wide accent; Studio-driven, no per-page override */

  /* Names the design file uses that the live :root never set */
  --cedar:     var(--accent-voice);          /* design file section 2 names the token --cedar; 2A says "no legacy name". Kept so section 2 resolves */
  --gym-watch: var(--status-watch);          /* the site reads it with a #D88B6A fallback, same value */

  /* Fonts (live short handles) */
  --font-d: var(--font-display);
  --font-b: var(--font-body);
  --font-s: var(--font-voice);               /* new 2026-10-18 */
  --font-m: var(--font-label);               /* new 2026-10-18 */

  /* Top-navigation set (live second :root block). Same chain as the live file. */
  --nav-gold:       var(--warm);
  --nav-paper:      var(--warm-cream);
  --nav-gold-rule:  color-mix(in srgb, var(--warm) 28%, transparent);
  --nav-paper-mute: color-mix(in srgb, var(--warm-cream) 52%, transparent);
  --nav-ink:        var(--navy);             /* dark text on a sage fill */
  --nav-scrim:      color-mix(in srgb, var(--deep) 86%, transparent);

  /* Theme Studio tool chrome (live third :root block, inside #tstudio-css).
     The tool's own gold so it reads as a tool, not site content. Not part of
     the brand palette; carried here only so the page needs no :root of its own. */
  --ts-gold: #C7B05A;
}

/* Live second --nav-h value (inside the 768px block of the page's own CSS). */
@media (max-width: 768px) {
  :root { --nav-h: 57px; }
}