/* ==========================================================================
   Endless Hybrids — Design Tokens  (v1.1.0)
   Canonical CSS custom properties. Mirror of brand/design-tokens.json.
   Load FIRST: tokens.css -> themes.css -> base.css -> components.css.
   All custom properties are namespaced --eh-* to be collision-safe inside
   consuming apps (e.g. the Never Fear projects).

   v1.1.0 — adopts the refined system ported from the endless-hybrids-design
   skill (built with Claude Design): IBM Plex Sans replaces Jost for body/UI;
   body 16->17px; smallest labels lifted (eyebrow 9->10, label 10->11);
   cream-on-dark alphas brightened; + new tokens (red-deep, stone-deep,
   cream-sink, lh-relaxed, type-lead, radius-lg/pill, elev-pop, focus-ring).
   ========================================================================== */

:root {
  /* ---- Palette (primitive) ------------------------------------------------ */
  --eh-red:            #D93A2E;   /* Bold Red — accent, emphasis, CTAs */
  --eh-red-deep:       #B82E24;   /* darker red — CTA hover / pressed */
  --eh-navy:           #263444;   /* Dark Navy — headings, dark panels */
  --eh-navy-soft:      #4D5B6A;   /* Soft Navy — secondary heading tone */
  --eh-ink:            #2F2C28;   /* Warm Charcoal — body text */
  --eh-stone:          #918A80;   /* Warm Stone — secondary text, labels */
  --eh-stone-deep:     #6E665B;   /* Deepened stone — small text that must pass contrast */
  --eh-cream-bg:       #FAF0E0;   /* Light Cream — page background */
  --eh-cream-card:     #F7EAD0;   /* Warm Cream — cards, raised surfaces */
  --eh-cream-sink:     #F1E2C4;   /* Recessed cream — wells, inputs, code */
  --eh-divider:        #D8D2C8;   /* Warm Light Gray — borders, dividers */
  --eh-divider-hover:  #C4BDB2;   /* hover border */
  --eh-cinematic:      #28261C;   /* Cinematic near-black (dark theme) */
  --eh-amber:          200, 170, 100; /* dark-cinematic accent (rgb triplet) */

  /* cream-on-dark alphas (text over navy/cinematic) — brightened in v1.1.0
     from the original .88/.60/.40 for legibility */
  --eh-cream-strong:   rgba(255, 248, 230, 0.92);
  --eh-cream-mute:     rgba(255, 248, 230, 0.68);
  --eh-cream-faint:    rgba(247, 234, 208, 0.45);
  --eh-red-wash:       rgba(217, 58, 46, 0.06);

  /* ---- Semantic roles (light defaults; themes.css overrides these) -------- */
  --eh-accent:         var(--eh-red);
  --eh-heading:        var(--eh-navy);
  --eh-body:           var(--eh-ink);
  --eh-muted:          var(--eh-stone);
  --eh-muted-strong:   var(--eh-stone-deep);
  --eh-surface-page:   var(--eh-cream-bg);
  --eh-surface-raised: var(--eh-cream-card);
  --eh-surface-sink:   var(--eh-cream-sink);
  --eh-surface-invert: var(--eh-navy);
  --eh-on-invert:      var(--eh-cream-strong);
  --eh-border:         var(--eh-divider);

  /* ---- Fonts -------------------------------------------------------------- */
  --eh-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* story / headings */
  --eh-font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;     /* engineering / body / UI */
  --eh-weight-body:    400;  /* IBM Plex Sans reads cleanly at 400 on warm cream (v1.1.0) */
  --eh-weight-body-lt: 400;  /* light body usages collapse to 400 under the new face */

  /* ---- Type scale (web px; clamp() preserves responsiveness) -------------- */
  --eh-type-display: clamp(40px, 5.5vw, 64px);
  --eh-type-h1:      clamp(30px, 3.5vw, 42px);
  --eh-type-h2:      clamp(23px, 3vw, 30px);
  --eh-type-h3:      24px;
  --eh-type-subhead: clamp(19px, 2.5vw, 24px);
  --eh-type-lead:    19px;   /* intro / standfirst paragraph */
  --eh-type-body:    17px;   /* bumped 16->17 for body comfort (v1.1.0) */
  --eh-type-body-sm: 15px;
  --eh-type-cta:     13px;
  --eh-type-label:   11px;   /* was 10 (v1.1.0) */
  --eh-type-eyebrow: 10px;   /* was 9 (v1.1.0) */

  /* line-heights */
  --eh-lh-tight:   1.12;  /* display */
  --eh-lh-snug:    1.3;   /* headings */
  --eh-lh-body:    1.2;   /* DEFAULT body — intentional tight editorial leading (brand canonical) */
  --eh-lh-relaxed: 1.8;   /* long-form prose, bios, callout bodies */

  /* letter-spacing */
  --eh-track-display: 0.5px;
  --eh-track-body:    0.01em;  /* a hair of tracking aids the geometric sans body */
  --eh-track-label:   2px;
  --eh-track-eyebrow: 2.5px;
  --eh-track-cta:     2px;

  /* ---- Spacing scale (4px base) ------------------------------------------- */
  --eh-space-1:  4px;
  --eh-space-2:  8px;
  --eh-space-3:  12px;
  --eh-space-4:  16px;
  --eh-space-5:  20px;
  --eh-space-6:  24px;
  --eh-space-7:  28px;
  --eh-space-8:  32px;
  --eh-space-9:  36px;
  --eh-space-10: 40px;
  --eh-space-11: 44px;
  --eh-space-12: 48px;
  --eh-space-14: 56px;
  --eh-space-16: 64px;

  --eh-section-pad: clamp(40px, 5vw, 80px);

  /* ---- Containers --------------------------------------------------------- */
  --eh-container-narrow: 760px;
  --eh-container-md:     900px;
  --eh-container-lg:     1100px;
  --eh-container-xl:     1200px;

  /* ---- Shape ------------------------------------------------------------- */
  --eh-radius-sm:    4px;
  --eh-radius-md:    6px;
  --eh-radius-lg:    10px;
  --eh-radius-round: 50%;
  --eh-radius-pill:  999px;

  --eh-border-hairline: 1px solid var(--eh-border);
  --eh-border-accent:   3px solid var(--eh-accent);

  /* ---- Elevation (warm shadows only) ------------------------------------- */
  --eh-elev-card: 0 6px 28px rgba(61, 58, 54, 0.10);
  --eh-elev-soft: 0 4px 24px rgba(61, 58, 54, 0.07);
  --eh-elev-pop:  0 12px 40px rgba(61, 58, 54, 0.16);
  --eh-elev-cta:  0 4px 16px rgba(217, 58, 46, 0.25);
  --eh-glow-amber: 0 0 20px 4px rgba(180, 140, 60, 0.10);
  --eh-focus-ring: 0 0 0 3px rgba(217, 58, 46, 0.30);

  /* ---- Motion ------------------------------------------------------------ */
  --eh-dur-hover:  0.3s;
  --eh-dur-reveal: 0.6s;
  --eh-dur-thesis: 0.8s;
  --eh-dur-fade:   1.2s;
  --eh-breathe-dur: 4s;
  --eh-ease:     ease;
  --eh-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}