/* tokens.css — semantic design tokens, both themes.
   Components never reference raw hex. See redesign guide §4.2.
   :root resolves to light: light is the default at ship. */

/* v5 §4 One spacing and radius system. Geometry is theme-independent, so it
   lives on a plain :root ahead of the palettes. */
:root {
  --section-gap:   96px;   /* between sections */
  --block-gap:     24px;   /* between cards in a row */
  --radius-lg:     20px;   /* mock, feature cards, closing panel */
  --radius-md:     16px;   /* step cards, FAQ open row */
  --radius-sm:     10px;   /* buttons, step badges */
  --radius-pill:  999px;   /* chips, FAQ toggles */
}

:root[data-theme="dark"],
.force-dark {
  color-scheme: dark;

  /* surfaces */
  --bg:               #090D09;
  --bg-subtle:        #0E130D;
  --surface:          #131A12;
  --surface-raised:   #1A2318;
  --surface-inset:    #0B0F0A;
  --surface-hover:    #1F2A1D;

  /* lines */
  --border:           #242E22;
  --border-strong:    #36432F;

  /* text */
  --text:             #F3F6EF;
  --text-secondary:   #C2CBBB;
  --text-muted:       #8E9A88;
  --text-muted-accent:#97A881;   /* muted, 15% toward the accent: step numerals on --bg */
  --text-on-accent:   #0A0F0A;

  /* accent */
  --accent:           #C9F75C;
  --accent-hover:     #D6FF74;
  --accent-press:     #B3E03F;
  --accent-border:    transparent;
  --accent-text:      #C9F75C;
  --accent-text-strong: #C9F75C; /* dark needs no darkening: already 12:1 on --surface */
  --accent-subtle:    rgba(201, 247, 92, 0.12);
  --accent-ring:      #C9F75C;   /* solid: a 40% ring measured 3.29:1, too weak to rely on */

  /* chat */
  --bubble-in:        #1A2318;
  --bubble-in-text:   #F3F6EF;
  --bubble-out:       #26401C;
  --bubble-out-text:  #EAF7D5;
  --bubble-out-muted: #B4C3AA;

  /* elevation */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.60);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:        0 16px 48px rgba(0, 0, 0, 0.65);

  /* glow — dark only */
  --glow-accent:      0 0 40px rgba(201, 247, 92, 0.18);
  --glow-hero:        radial-gradient(55% 45% at 50% 40%, rgba(201,247,92,0.22), transparent 70%);

  /* derived: the dotted field behind the hero and the mock thread */
  --dot-field:        rgba(201, 247, 92, 0.16);
  --ring-line:        var(--border-strong);
  --mock-border:      rgba(201, 247, 92, 0.18);
  --vehicle-line:     rgba(201, 247, 92, 0.38);
  --backdrop:         rgba(6, 9, 6, 0.74);
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* §1 Neutral page. Nothing in the base palette has a green cast. */
  --bg:               #FAFAF8;
  --bg-subtle:        #FAFAF8;
  --surface:          #FFFFFF;
  --surface-raised:   #FFFFFF;
  --surface-inset:    #F3F3F0;
  --surface-hover:    #F5F5F2;

  --ink:              #0E140D;   /* §1 the stroke colour, used everywhere on the white page */
  --border:           #E6E6E1;   /* soft hairlines (dividers) */
  --border-strong:    #CFCFC8;

  /* §1 stroke language: light is a stroke-based page — thin dark lines,
     solid offset shadows, flat fills. No blur shadows anywhere on white.
     v4 §1.1: every offset is one colour — the deep green of the card panels,
     never black. The closing panel overrides it to a lighter green. */
  --stroke:           1px solid var(--ink);
  --offset-color:     #1E3318;
  --offset-sm:        3px 3px 0 var(--offset-color);
  --offset-md:        5px 5px 0 var(--offset-color);
  --offset-lg:        6px 6px 0 var(--offset-color);

  --text:             #0E140D;
  --text-secondary:   #4A4F47;
  --text-muted:       #6E736B;
  --text-muted-accent:#6E736B;   /* §3.4 no green on the white page; dark keeps its greener numerals */
  --text-on-accent:   #0E140D;

  /* §2 One accent, only ever a fill with dark text on it. */
  --accent:           #C9F75C;
  --accent-hover:     #D6FF74;
  --accent-press:     #B3E03F;
  --accent-border:    #1E2A18;
  --accent-text:      #0E140D;
  --accent-text-strong: #0E140D;
  --accent-subtle:    #EEF7D6;
  /* §6 spec says rgba(14,20,13,.35); that measures 2.25:1 on the page and
     1.9:1 on lime, under the 3:1 WCAG 2.2 wants for a focus indicator.
     0.5 is the lowest alpha that clears it (3.48:1) and reads the same. */
  --accent-ring:      rgba(14, 20, 13, 0.50);

  --bubble-in:        #F3F3F0;
  --bubble-in-text:   #0E140D;
  --bubble-out:       #E7F7C8;
  --bubble-out-text:  #0E140D;
  --bubble-out-muted: #3F4A37;

  --shadow-sm:        0 1px 2px rgba(15, 20, 12, 0.06);
  --shadow-md:        0 8px 24px rgba(15, 20, 12, 0.08);
  --shadow-lg:        0 24px 64px rgba(15, 20, 12, 0.14);

  --glow-accent:      none;
  --glow-hero:        none;      /* §4 no radial, no blur, no haze on the white page */

  --dot-field:        rgba(15, 20, 12, 0.14);
  --ring-line:        var(--border-strong);
  --mock-border:      rgba(201, 247, 92, 0.25);
  --vehicle-line:     var(--border-strong);
  --backdrop:         rgba(15, 20, 12, 0.42);
}

/* A forced-dark island re-resolves inherited colour at its own boundary:
   body{color:var(--text)} already resolved to the light value further up. */
.force-dark { color: var(--text); }


/* Suppress the transition sweep while the theme swaps. See guide §5.3. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}