/* =============================================================================
   Grow Theory — Design Tokens
   -----------------------------------------------------------------------------
   Ported from the v4 site (`Home v4.dc.html:14-25`) and extended:
     · hexes that v4 hardcoded inline are promoted to real tokens
     · a fluid type scale replaces v4's fixed pixel sizes
     · motion, spacing, radius and z-index scales are formalised
   Contrast ratios in comments are measured against --c-void (#090a0c).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     SURFACES — darkest to lightest
     ------------------------------------------------------------------ */
  --c-void:        #090a0c;  /* page background */
  --c-well:        #0e0e10;  /* deepest nested card */
  --c-card:        #111111;  /* cards, panels, product-window chrome */
  --c-raised:      #17181b;  /* tab-panel rows, raised list items */
  --c-elevated:    #1d1e21;  /* hover fill, section divider line */
  --c-overlay:     #26272a;  /* inner hairline, active tab fill */

  /* Light bands (the site alternates dark/light sections) */
  --c-light-bg:    #ffffff;
  --c-light-panel: #f6f6f6;  /* secondary surface on light bands */
  --c-light-ink:   #050506;  /* headings on light — not pure black */
  --c-light-body:  #55575c;  /* body copy on light */
  --c-light-line:  #e6e8ee;

  /* ---------------------------------------------------------------------
     BORDERS
     ------------------------------------------------------------------ */
  --c-border:        #4a4b50;  /* primary hairline on dark */
  --c-border-subtle: #26272a;  /* inner hairline */
  --c-border-faint:  #1d1e21;  /* section dividers */

  /* ---------------------------------------------------------------------
     TEXT — every value below is AA-verified on --c-void
     ------------------------------------------------------------------ */
  --c-text:        #ffffff;  /* 19.6:1 — headings */
  --c-text-strong: #d1d1d1;  /* 12.0:1 — emphasised body in cards */
  --c-text-body:   #a9a9aa;  /*  7.3:1 — default body copy on dark */
  --c-text-muted:  #95979e;  /*  5.9:1 — labels, eyebrows, footer links */

  /* #6b6c6d measures 3.0:1 and FAILS AA for text. v4 used it for eyebrows,
     footer links and muted labels; every one of those now uses --c-text-muted.
     It is retained ONLY for non-text decoration (inactive dots, dividers). */
  --c-decor-dim:   #6b6c6d;

  /* ---------------------------------------------------------------------
     BRAND
     ------------------------------------------------------------------ */
  /* Decorative brand blue — gradients, glows, borders, active states.
     3.9:1 on the canvas, so it is a FILL, never body text. */
  --c-iris:        #5683da;

  /* Button fill. White on #5683da measures only 3.71:1 and fails AA, so the
     filled variant uses a deeper shade of the same blue: white on this is
     5.14:1, and the button edge against the canvas is 3.86:1. Hover darkens
     (6.55:1), matching the Grow Theory system's "primary buttons darken" rule
     rather than lightening into a failing value. */
  --c-iris-fill:       #4169c9;
  --c-iris-fill-hover: #3557b8;
  --c-iris-text:   #9db9ec;  /* 8.6:1 — the on-dark link/accent text colour */
  --c-ember:       #ff8964;  /* 7.9:1 — AI / urgency accent, safe as text */
  --c-linen:       #e5e5e7;  /* label pills, white-button hover */

  /* Brand alpha recipes — the actual system, lifted from v4 */
  --c-iris-wash:   rgba(86, 131, 218, 0.12);
  --c-iris-glow:   rgba(86, 131, 218, 0.28);
  --c-iris-ring:   rgba(157, 185, 236, 0.45);
  --c-ember-wash:  rgba(255, 137, 100, 0.12);
  --c-ember-glow:  rgba(255, 137, 100, 0.28);
  --c-white-wash:  rgba(255, 255, 255, 0.08);

  --g-brand:   linear-gradient(135deg, var(--c-iris), var(--c-ember));
  --g-eyebrow: linear-gradient(90deg, var(--c-iris-glow), var(--c-ember-glow));
  --g-aurora:  linear-gradient(180deg,
                 rgba(86, 131, 218, 0.60) 0%,
                 rgba(255, 137, 100, 0.55) 55%,
                 rgba(255, 255, 255, 0.85) 100%);

  /* Semantic — used only inside product mockups */
  --c-ok:    #3fb984;
  --c-warn:  #ffb054;
  --c-risk:  #ff8964;
  --c-info:  #7b6cff;

  /* ---------------------------------------------------------------------
     TYPE
     ------------------------------------------------------------------ */
  --f-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* v4's signature: Sora never below 24px, Inter never above 18px.
     Fluid ranges keep that true from 320px to 1200px. */
  /* The hero and page headings carry explicit <br> line breaks, so their type
     has to shrink in step with the container or the authored break is lost and
     a two-line headline reflows to four. The homepage's longest line measures
     ~11x its font-size, so these ramps are tuned to keep 11x inside the
     container all the way down to 768px, where the layout goes single-column
     and wrapping is correct anyway. Re-check these if a hero headline changes
     length. */
  /* The hero headline ("The Science of Growth") measures 11.54x the font size, so
     it holds one line while viewport-64 >= 11.54*fs. This ramp keeps ~3% of
     headroom at 768 and still lands on 80px at 1200; below ~715px it wraps to
     two, which is correct on a phone. Re-measure if the headline changes. */
  --t-hero:    clamp(2.75rem, 1.354rem + 4.86vw, 5rem);     /* 59@768 → 80@1200 */
  --t-display: clamp(2.5rem,  1.75rem + 3.60vw, 4.5rem);    /* 56@768 → 72@1200 */
  --t-h2:      clamp(2rem,    1.19rem + 4.03vw, 3.5rem);    /* 32 → 56 */
  --t-h3:      clamp(1.625rem, 1.30rem + 1.61vw, 2.125rem); /* 26 → 34 */
  --t-h4:      clamp(1.375rem, 1.25rem + 0.60vw, 1.5rem);   /* 22 → 24 */
  --t-stat:    clamp(2.25rem, 1.44rem + 4.03vw, 3.75rem);   /* 36 → 60 */

  --t-lead:  1rem;      /* 16 */
  --t-sub:   1.125rem;  /* 18 — largest Inter size */
  --t-body:  0.9375rem; /* 15 */
  --t-sm:    0.875rem;  /* 14 */
  --t-xs:    0.8125rem; /* 13 */
  --t-micro: 0.75rem;   /* 12 */
  --t-eyebrow: 0.6875rem; /* 11 */

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-body:  1.5;
  --lh-loose: 1.6;

  --tr-hero:    -0.05em;
  --tr-display: -0.045em;
  --tr-h2:      -0.04em;
  --tr-h3:      -0.035em;
  --tr-body:    -0.01em;
  --tr-caps:     0.02em;

  /* ---------------------------------------------------------------------
     SPACE — v4 uses an 8px rhythm with 32px gutters
     ------------------------------------------------------------------ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --page-max: 1200px;
  --gutter:   clamp(1rem, 0.45rem + 2.7vw, 2rem);            /* 16 → 32 */
  --section-y: clamp(3.5rem, 2.0rem + 7.5vw, 6rem);          /* 56 → 96 */
  --section-y-lg: clamp(4.5rem, 2.3rem + 11vw, 8rem);        /* 72 → 128 */

  /* ---------------------------------------------------------------------
     SHAPE
     ------------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  --sh-sm: rgba(0, 0, 0, 0.15) 0 4px 6px 0;
  --sh-md: rgba(0, 0, 0, 0.35) 0 4px 16px 0;
  --sh-xl: rgba(0, 0, 0, 0.50) 0 6px 25px 0;

  /* ---------------------------------------------------------------------
     MOTION — the single easing curve the whole brand uses.
     Identical in v4 and in the _ds design system (--ease-out).
     ------------------------------------------------------------------ */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-fast:    120ms;
  --d-base:    200ms;
  --d-slow:    320ms;
  --d-reveal:  700ms;
  --d-reveal-group: 600ms;

  /* ---------------------------------------------------------------------
     LAYERS
     ------------------------------------------------------------------ */
  --z-base:    1;
  --z-sticky:  40;
  --z-nav:     50;
  --z-menu:    60;
  --z-drawer:  70;
  --z-skip:    100;
}

/* =============================================================================
   Light band scope — sections that invert to white reuse the same token names
   so components never need a light-specific variant.
   ========================================================================== */
.band-light {
  --c-void:          var(--c-light-bg);
  --c-card:          var(--c-light-panel);
  --c-well:          var(--c-light-panel);
  --c-raised:        var(--c-light-panel);
  --c-elevated:      #eceef2;
  --c-overlay:       #e2e5ea;
  --c-border:        #d1d1d1;
  --c-border-subtle: var(--c-light-line);
  --c-border-faint:  var(--c-light-line);
  --c-text:          var(--c-light-ink);
  --c-text-strong:   #23252a;
  --c-text-body:     var(--c-light-body);
  --c-text-muted:    #66696f; /* 5.50:1 on white, 5.09:1 on the panel tint */
  --c-decor-dim:     #9a9da5;
  --c-iris-text:     #3d62d6; /* 7.0:1 on white — the azure link on light */
  --c-white-wash:    rgba(9, 10, 12, 0.05);
}