/* Design tokens — the only place colour, type scale, rhythm and motion live. */

:root {
  /* Tells the browser to render native controls (the language select and its
     dropdown list) dark instead of light-on-light. */
  color-scheme: dark;

  /* Flat surfaces only. No blooms, no glows: the page is black and stays black. */
  --black: #000000;
  --surface: #0c0d0f;
  --surface-2: #15171a;
  --hair: rgb(255 255 255 / 11%);
  --hair-faint: rgb(255 255 255 / 5%);
  --hair-loud: rgb(255 255 255 / 22%);

  /* Ink */
  --text: #f3f5f2;
  --text-dim: #9aa29d;
  --text-faint: #7b8581;

  /* Two greens, two jobs: the softer one carries the brand and the UI,
     the acid one is the loud accent that used to be orange. */
  --pea: #93d15e;
  --acid: #c3f53c;

  /* Type */
  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --text-micro: 0.6875rem;
  --text-small: 0.8125rem;
  --text-body: clamp(0.95rem, 0.9rem + 0.22vw, 1.0625rem);
  --text-lead: clamp(1.05rem, 0.96rem + 0.5vw, 1.3rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --text-h2: clamp(2rem, 1.3rem + 3vw, 4rem);
  --text-hero: clamp(3.1rem, 0.4rem + 11.5vw, 10.5rem);

  --tracking-caps: 0.22em;

  /* Rhythm — deliberately uneven: sections breathe, bands stay tight. */
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);
  --space-band: clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --space-section: clamp(4.25rem, 2.5rem + 6.5vw, 8rem);
  --maxw: 78rem;

  /* Motion */
  --fast: 140ms;
  --normal: 300ms;
  --slow: 650ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --normal: 1ms;
    --slow: 1ms;
  }
}