/* ==========================================================================
   TaLedi Enterprise design tokens - the one token file for taledi.ca and every
   Enterprise page. Standalone: it does not load, and is not loaded by, the
   TaLedi Distribution tokens. Never use it on TaLedi Distribution.

   Implements website/taledi-enterprise-DESIGN.md. The design file decides,
   this file follows: edit the design file first, then this file.

   Link it before the page's own <style>:
     <link rel="stylesheet" href="/enterprise-assets/tokens/taledi-enterprise-tokens.css">

   Three layers:
     1. Primitives  raw palette steps (--heron-700). Never applied in a rule.
     2. Semantic    the job a value does (--surface-page, --text-body).
     3. Handles     the short names the Enterprise pages and ent-lib-v2.css already
                    use (--bg, --text, --accent, --ink ...), aliased to layer 2.

   Source of every colour: the heron paintings in
   production/design-system-rollout/logo/edi-swooshes/repeatable/round-9-lockup-wrappers/higgsfield/
     forest = 80-scene-master-forest.png, 82-pattern-forest.png   (dark mode)
     sunset = 81-scene-master-sunset.png, 83-pattern-sunset.png   (light mode)
   Each hex is a median sampled from the painting, never invented. The three
   anchors are the heron, the blackberry leaf and the berry (Scott, 2026-11-12):
     heron  brand band, headings, interface accent
     leaf   links and buttons
     berry  the human-voice accent, and the brand band on dark

   Two modes:
     :root                    light, sunset ground
     [data-surface="dark"]    dark, forest ground, set on <html>
   Each page sets the attribute in a head script from the visitor's
   prefers-color-scheme (?dark or ?light in the address overrides it).

   The logo files keep their own inks, harbour #16241a and warm cream #f3ecd6.
   Never recolour a mark to this palette.

   Contrast ratios in the comments are WCAG, measured 2026-11-12.
   No @import and no @font-face: this file only names font families.
   ========================================================================== */

:root {

  /* ======================================================================
     LAYER 1 - PRIMITIVES. More white = lower number. Reference only.
     ====================================================================== */
  --heron-300:      #818f91;   /* forest: light plumage */
  --heron-500:      #596e76;   /* forest: mid plumage */
  --heron-600:      #5b5e72;   /* sunset: plumage, slate-lavender in that light */
  --heron-700:      #485366;   /* sunset: deep plumage */
  --leaf-300:       #a69c6b;   /* forest: lit leaf */
  --leaf-500:       #6b7048;   /* forest: leaf body */
  --leaf-700:       #434a37;   /* sunset: leaf */
  --leaf-800:       #2e352a;   /* sunset: leaf in shadow */
  --berry-400:      #af6359;   /* sunset: berry highlight */
  --berry-600:      #662f36;   /* sunset: berry */
  --berry-800:      #3f1f26;   /* sunset: berry in shadow */
  --evergreen-700:  #1c3020;   /* forest: lifted ground */
  --evergreen-800:  #0d2418;   /* forest: the pattern ground, 45% of the painting */
  --evergreen-900:  #061711;   /* forest: darkest ground */
  --sunset-100:     #fdd8aa;   /* sunset: palest sky and wave foam */
  --sunset-300:     #fcbf7c;   /* sunset: the pattern ground, 32% of the painting */
  --sunset-400:     #e0a569;   /* sunset: cloud band */
  --sunset-500:     #eb935a;   /* sunset: deep orange at the horizon */
  --moon-100:       #f1d9ab;   /* forest: moon and cloud cream */
  --bark-500:       #6f6146;   /* sunset: branch */
  --bark-600:       #574f3d;   /* sunset: branch in shadow */
  --bark-700:       #3f4136;   /* sunset: tree dark */
  --bark-900:       #262823;   /* sunset: darkest tone */
  --mark-cream:     #f3ecd6;   /* the logo's warm cream: logo grounds only */
  --mark-harbour:   #16241a;   /* the logo's harbour: logo grounds only */
  --white:          #ffffff;


  /* ======================================================================
     LAYER 2 - SEMANTIC, light mode (sunset)
     ====================================================================== */

  /* Surface */
  --surface-page:         color-mix(in srgb, var(--sunset-100) 50%, var(--white));   /* #feecd4: palest sky at half strength, so a long read sits on a quiet ground */
  --surface-paper:        var(--sunset-100);
  --surface-card:         var(--white);
  --surface-dark:         var(--evergreen-800);
  --surface-deepest:      var(--evergreen-900);
  --surface-dark-raised:  var(--evergreen-700);
  --surface-brand:        var(--heron-700);   /* text on it: white 7.76 or --text-on-dark 5.64. Never a stepped-down alpha (0.8 is 4.25) */
  --surface-panel:        color-mix(in srgb, var(--evergreen-700) 74%, transparent);
  --surface-glass:        color-mix(in srgb, var(--heron-500) 66%, transparent);
  --surface-mark:         var(--mark-cream);     /* ground for a harbour logo */
  --surface-mark-dark:    var(--mark-harbour);   /* ground for a warm cream logo */
  --surface-tint:         color-mix(in srgb, var(--text-strong) 4%, transparent);

  /* Text. Ratios are on --surface-page, then on --surface-paper. */
  --text-body:       var(--bark-700);    /* 8.99, 7.71 */
  --text-strong:     var(--bark-900);    /* 12.88, 11.05 */
  --text-secondary:  var(--bark-600);    /* 7.01, 6.01 */
  --text-muted:      var(--bark-500);    /* 5.23, 4.48: page and card only, not on paper */
  --text-heading:    var(--heron-700);   /* 6.72, 5.76 */
  --text-on-dark:    var(--moon-100);    /* 11.89 on --surface-dark. Moon cream, not white */
  --text-on-dark-strong:      color-mix(in srgb, var(--text-on-dark) calc(var(--alpha-on-dark-strong) * 100%), transparent);
  --text-on-dark-body:        color-mix(in srgb, var(--text-on-dark) calc(var(--alpha-on-dark-body) * 100%), transparent);
  --text-on-dark-meta:        color-mix(in srgb, var(--text-on-dark) calc(var(--alpha-on-dark-meta) * 100%), transparent);
  --text-on-dark-meta-faint:  color-mix(in srgb, var(--text-on-dark) calc(var(--alpha-on-dark-meta-faint) * 100%), transparent);
  --text-on-dark-whisper:     color-mix(in srgb, var(--text-on-dark) calc(var(--alpha-on-dark-whisper) * 100%), transparent);

  /* Border. The ladder is the strong-text ink mixed with transparent, so a rule keeps the tint of the surface under it. */
  --border-default:   var(--sunset-400);
  --border-brand:     var(--heron-700);
  --border-on-dark:   color-mix(in srgb, var(--text-on-dark) 12%, transparent);
  --border-grid-gap:  color-mix(in srgb, var(--text-strong) 9%, transparent);
  --border-faint:     color-mix(in srgb, var(--text-strong) 6%, transparent);    /* divider inside a card */
  --border-hairline:  color-mix(in srgb, var(--text-strong) 12%, transparent);   /* card edge, section rule */
  --border-strong:    color-mix(in srgb, var(--text-strong) 20%, transparent);   /* outline of a control */
  --border-emphatic:  color-mix(in srgb, var(--text-strong) 30%, transparent);   /* outline of a ghost button */

  /* Action */
  --action-primary:        var(--leaf-700);   /* 7.99, 6.85 */
  --action-primary-hover:  var(--leaf-800);

  /* Accent */
  --accent-primary:  var(--heron-600);   /* 5.52, 4.74 */
  --accent-soft:     color-mix(in srgb, var(--accent-primary) 18%, transparent);
  --accent-forest:   var(--leaf-500);
  --accent-voice:    var(--berry-600);   /* 8.97, 7.69. A person speaking; never links, buttons, active states or eyebrows */

  /* Status */
  --status-watch:    var(--sunset-500);   /* marks only on light; 6.90 on --surface-dark */


  /* ======================================================================
     NON-COLOUR FAMILIES. Same scales as TaLedi Distribution, copied 2026-11-12.
     ====================================================================== */

  /* Font family: the four roles. Stacks only; each page loads its own fonts. */
  --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;
  --font-size-quote:           clamp(1.25rem, 2vw, 1.625rem);     /* pull quote */
  --font-size-note:            clamp(1.125rem, 1.6vw, 1.375rem);  /* a signed note */
  --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);
  --font-size-accent-word:      1.06em;   /* the one accent word in a heading, relative to its parent  */

  /* Radius ladder. Sharp is the default. 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 */

  /* Letter-spacing, paired with the display font sizes. In em, so each use scales with its own font size. */
  --letter-spacing-display-chapter:  -0.035em;   /* hero H1 and chapter title */
  --letter-spacing-display-closing:  -0.03em;    /* contact and closing H2 */
  --letter-spacing-display-section:  -0.025em;   /* section H2 */
  --letter-spacing-display-product:  -0.02em;    /* product-section title */
  --letter-spacing-title:            -0.01em;    /* card name, accent word, wordmark */
  --letter-spacing-button:            0.01em;    /* button and nav label */
  --letter-spacing-caption:           0.05em;    /* caption and metadata */
  --letter-spacing-label:             0.06em;    /* eyebrow, numbered label, spec caption. Mono is never tracked past 0.08em */

  /* Shadow. Neutral black. Text levels are --shadow-text-*, so --text-* stays colour-only. */
  --shadow-hover:                  0 8px 24px rgba(0,0,0,0.08);
  --shadow-lift:                   0 10px 28px rgba(0,0,0,0.18);
  --shadow-chrome:                 0 2px 12px -3px rgba(0,0,0,0.7);
  --shadow-chrome-raised:          0 8px 26px -8px rgba(0,0,0,0.7);

  --shadow-modal:                  0 30px 80px -20px rgba(0,0,0,0.6);   /* dialog, lightbox image, any panel over a scrim */
  --shadow-drawer:                 12px 0 40px rgba(0,0,0,0.45);   /* panel sliding in from an edge */
  --shadow-chip:                   0 1px 5px rgba(0,0,0,0.4);   /* dot or chip on a photo */
  --shadow-button-float:           0 4px 16px rgba(0,0,0,0.25);   /* round button floating over content: back-to-top */
  --shadow-nav-scrolled:           0 1px 0 rgba(255,255,255,0.05), 0 6px 24px rgba(0,0,0,0.35);
  --shadow-inset-ring-on-photo:    inset 0 0 0 1px rgba(255,255,255,0.35);
  --shadow-text-on-photo:          0 2px 24px rgba(0,0,0,0.45);
  --shadow-text-eyebrow-on-photo:  0 1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.6);

  /* Text on dark: moon cream stepped down by opacity. Moon cream carries less light than white, so body and meta sit
     higher than Distribution's 0.55 and 0.50. Ratios are on --surface-dark, then --surface-dark-raised. */
  --alpha-on-dark-strong:      0.8;    /* 8.05, 7.08 */
  --alpha-on-dark-body:        0.66;   /* 5.86, 5.36 */
  --alpha-on-dark-meta:        0.60;   /* 5.13, 4.66 */
  --alpha-on-dark-meta-faint:  0.38;
  --alpha-on-dark-whisper:     0.28;
  --alpha-hero-scrim:          0.78;   /* the wash behind a hero text block */
  --surface-hero-scrim:        color-mix(in srgb, var(--surface-deepest) calc(var(--alpha-hero-scrim) * 100%), transparent);

  /* 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 */
  --duration-fast:     150ms;
  --duration-base:     220ms;
  --duration-slow:     350ms;
  --duration-stagger:  150ms;
  --duration-intro:    1600ms;

  /* Spacing: the 4pt scale */
  --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; --s28:112px; --s32:128px;

  /* Layout */
  --nav-h: 52px;   /* the sticky sub-navigation row */
  --max: 1280px;

  /* ======================================================================
     LAYER 3 - HANDLES. The short names the Enterprise pages and ent-lib-v2.css
     use. Aliases only: a page never sets a colour of its own.
     ====================================================================== */
  --bg:         var(--surface-page);
  --text:       var(--text-strong);
  --soft:       var(--text-secondary);
  --whisper:    var(--text-muted);
  --accent:     var(--accent-primary);
  --accent-2:   var(--action-primary);
  --rule:       var(--text-strong);
  --rule-soft:  var(--border-hairline);
  --ph-bg:      var(--surface-card);
  --ph-border:  var(--border-strong);
  --ph-text:    var(--text-muted);
  --ink:        var(--surface-brand);     /* a dark band inside a page: heron on light, berry on dark */
  --ink-2:      var(--surface-dark);
  --ink-soft:   var(--text-on-dark);      /* full strength: a stepped-down alpha fails on the heron band */
  --cream:      var(--text-on-dark);
  --warm:       var(--text-on-dark);      /* the accent on a dark band */
  --warm-cream: var(--surface-paper);
  --off:        var(--surface-page);
  --navy:       var(--surface-brand);
  --forest:     var(--action-primary);
  --green:      var(--action-primary);
  --basalt:     var(--text-secondary);
  --stone:      var(--text-muted);
  --radius:     var(--radius-none);
  --font-d:     var(--font-display);
  --font-b:     var(--font-body);
  --font-s:     var(--font-voice);
  --font-m:     var(--font-label);
}


/* ==========================================================================
   DARK MODE (forest). Same semantic names, re-pointed. Set on <html>, so the
   handles above follow. shortcut: a dark scope on an inner element switches
   the semantic names only, not the handles; upgrade if a page needs a forest
   band inside a sunset page.
   ========================================================================== */
[data-surface="dark"] {
  color: var(--text-body);
  background-color: var(--surface-page);

  --surface-page:   var(--evergreen-800);
  --surface-paper:  var(--evergreen-700);
  --surface-card:   var(--evergreen-700);
  --surface-brand:  var(--berry-800);   /* --text-on-dark 10.63, meta step 4.81 */
  --surface-tint:   color-mix(in srgb, var(--text-on-dark) 4%, transparent);

  --text-body:       var(--text-on-dark-body);
  --text-strong:     var(--text-on-dark);
  --text-secondary:  var(--text-on-dark-body);
  --text-muted:      var(--text-on-dark-meta);
  --text-heading:    var(--text-on-dark);

  --border-default:   var(--border-on-dark);
  --border-brand:     var(--heron-500);
  --border-grid-gap:  color-mix(in srgb, var(--text-on-dark) 9%, transparent);
  --border-faint:     color-mix(in srgb, var(--text-on-dark) 6%, transparent);
  --border-hairline:  color-mix(in srgb, var(--text-on-dark) 12%, transparent);
  --border-strong:    color-mix(in srgb, var(--text-on-dark) 20%, transparent);
  --border-emphatic:  color-mix(in srgb, var(--text-on-dark) 30%, transparent);

  --action-primary:        var(--leaf-300);   /* 5.92 on page, 5.08 on raised */
  --action-primary-hover:  var(--text-on-dark);

  --accent-primary:  var(--heron-300);   /* 4.89 on page; 4.20 on raised, so large text and marks only there */
  --accent-soft:     color-mix(in srgb, var(--accent-primary) 18%, transparent);
  --accent-forest:   var(--leaf-300);
  --accent-voice:    var(--berry-400);   /* 3.70: marks and large text only on dark */
}