/* ==========================================================================
   Design tokens — "Neurolab"

   The whole page runs on one idea: two voices.
   Machine speaks in mono + violet, always prefixed with ">".
   Human speaks in grotesque + ink or paper, never prefixed.
   Every token below serves that split. Nothing decorative.
   ========================================================================== */

:root {
  /* --- Core palette ------------------------------------------------------
     Five values. Violet and coral never blend into a gradient — they sit on
     opposite sides of the meaning. */
  --ink: #100e24; /* deep indigo. Not black: black reads dead on a full screen */
  --paper: #edeae0; /* light sections: parents, pricing, FAQ */
  --gen: #7b5cff; /* machine */
  --catch: #ff5c39; /* human: CTA, "caught it", errors */
  --muted: #8a86a6; /* secondary text on dark — 5.5:1 on ink */

  /* Contrast-safe variants. The base --gen fails AA as small text either way,
     so text never uses it directly. */
  --gen-light: #9b85ff; /* machine text on ink — 6.2:1 */
  --gen-deep: #5333d6; /* machine text on paper — 6.1:1 */
  --catch-deep: #b82e0e; /* human accent text on paper — 5.0:1 */

  /* --- Surfaces --------------------------------------------------------- */
  --surface-dark: var(--ink);
  --surface-dark-raised: #191733; /* cards on ink */
  --surface-light: var(--paper);
  --surface-light-raised: #f7f5ef; /* cards on paper */
  --hairline-dark: #2a2748;
  --hairline-light: #d5d1c4;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --step-h1: clamp(2.375rem, 5.2vw, 4.75rem);
  --step-h2: clamp(1.875rem, 3.2vw, 3rem);
  --step-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --step-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --step-body: 1.0625rem;
  --step-small: 0.9375rem;
  --step-mono: 0.8125rem;

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-body: 1.65;

  --tracking-display: -0.03em;
  --tracking-h2: -0.02em;
  --tracking-mono: 0.08em;

  /* --- Space -------------------------------------------------------------
     Base 8. Section rhythm is fluid so the page breathes the same way at
     every width. */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* --- Layout ------------------------------------------------------------
     Asymmetric: a narrow rail carries prompt lines, ages and numbering.
     The wide column carries everything a person actually reads. */
  --page-max: 82.5rem; /* 1320px */
  --rail: 15rem; /* 240px */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- Shape ------------------------------------------------------------- */
  --radius-pill: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.75rem;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Focus -------------------------------------------------------------
     One ring, visible on both surfaces, never removed. */
  --focus-ring: 3px;
  --focus-offset: 3px;
}

/* Section-level theming. Sections declare which side of the page they are on
   and inherit the right foreground colours — no per-element overrides. */
.theme-dark {
  --bg: var(--surface-dark);
  --bg-raised: var(--surface-dark-raised);
  --fg: var(--paper);
  --fg-muted: var(--muted);
  --fg-machine: var(--gen-light);
  --fg-accent: var(--catch);
  --hairline: var(--hairline-dark);
  --focus-color: var(--gen-light);
}

.theme-light {
  --bg: var(--surface-light);
  --bg-raised: var(--surface-light-raised);
  --fg: var(--ink);
  --fg-muted: #56536b;
  --fg-machine: var(--gen-deep);
  --fg-accent: var(--catch-deep);
  --hairline: var(--hairline-light);
  --focus-color: var(--gen-deep);
}