/* Design tokens. The only place where colours, fonts, spacing and radii are defined.
   Everything in styles.css references these via var(--...).
   Values ported from docs/DESIGN.md ("Quant paper" direction, 2026-09-05).
   Breakpoints cannot be tokens; styles.css uses 960px (tablet) and 640px (mobile). */

:root {
  /* Colour: single dark theme */
  --color-bg: #0b0c10;        /* page ground */
  --color-surface: #14161c;   /* the one raised block (Audit card), formula panels */
  --color-rule: #22242b;      /* hairlines, section dividers */
  --color-border: #44464f;    /* stronger hairlines, secondary button underline */
  --color-muted: #8a8c94;     /* secondary text, labels, captions */
  --color-text: #e8e6e0;      /* primary text, warm off-white */
  --color-accent: #8fbfae;    /* sage: italic emphasis, one chart line, the logo mark */
  --color-glow: #151820;      /* the three soft background lights */
  --glow-size: 1000px 700px;  /* ellipse of one light */

  /* Typography: faces */
  --font-display: Newsreader, Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  /* Typography: scale (desktop) */
  --text-label: 11px;
  --text-caption: 13px;
  --text-nav: 14px;
  --text-small: 15px;
  --text-body: 17px;
  --text-lead: 18px;
  --text-question: 18px;
  --text-h3: 22px;
  --text-closing: 26px;
  --text-card-title: 32px;
  --text-h2: 40px;
  --text-h1: 66px;

  /* Typography: scale (responsive overrides used by styles.css) */
  --text-h1-tablet: 56px;
  --text-h2-tablet: 36px;
  --text-h1-mobile: 40px;
  --text-h2-mobile: 30px;
  --text-nav-mobile: 16px;

  /* Typography: leading and tracking */
  --leading-h1: 1.04;
  --leading-h2: 1.1;
  --leading-h3: 1.3;
  --leading-story: 1.45;
  --leading-list: 1.5;
  --leading-body: 1.6;
  --leading-formula: 1.7;
  --tracking-h1: -0.015em;
  --tracking-h2: -0.01em;
  --tracking-label: 0.12em;
  --tracking-tagline: 0.08em;
  --tracking-caption: 0.02em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;
  --space-13: 104px;

  /* Layout */
  --container-max: 1088px;        /* content width, excluding side padding */
  --container-pad: 56px;          /* desktop side padding */
  --container-pad-tablet: 32px;   /* <= 960px */
  --container-pad-mobile: 24px;   /* <= 640px */
  --section-pad: 80px;
  --section-pad-mobile: 56px;
  --hairline: 1px;

  /* Shape: corners are 0 everywhere */
  --radius: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-reveal: 400ms;
  --duration-draw: 2400ms;        /* hero tail chart */
  --duration-draw-long: 5000ms;   /* Approach distribution chart */
  --reveal-opacity: 0.6;
  --reveal-rise: 8px;
}

/* Phones: the background lights are sized for a wide viewport; on a narrow screen only their
   edge is visible and OLED swallows the difference. Smaller and a step brighter. */
@media (max-width: 640px) {
  :root {
    --color-glow: #1a1e28;
    --glow-size: 560px 420px;
  }
}