/*
 * Design tokens.
 *
 * One palette spans both acts. That is what makes the upgrade read as a single
 * brand improving rather than two different websites stitched together.
 */

:root {
  /* Brand, from BRIEF.md */
  --magenta: #ff2e88;
  --cyan: #16c8e8;
  --violet: #8352f2;
  --amber: #ffaa1f;

  /* Period palette, Act 1 only */
  --desktop-teal: #008080;
  --ega-blue: #0000aa;
  --chrome: #c0c7c8;
  --chrome-light: #ffffff;
  --chrome-mid: #868a8e;
  --chrome-dark: #000000;
  --title-active-a: #000080;
  --title-active-b: #1084d0;
  --title-inactive-a: #808080;
  --title-inactive-b: #b5b5b5;

  /* Modern ground, Act 2 */
  --ink: #140b2e;
  --void: #07060e;
  --void-2: #0d0b1a;
  --surface: #14121f;
  --surface-2: #1b1830;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* Text. Tuned for contrast on --void, not guessed. */
  --text: #f4f2ff;
  --text-dim: #b4aed0;
  --text-faint: #8d86aa;

  /* Accent tints that stay legible as body text on near-black */
  --magenta-text: #ff6aa8;
  --cyan-text: #5fdcf4;
  --violet-text: #a98bff;
  --amber-text: #ffc357;

  /* Status and controls, from brand/DESIGN.md. Danger is its own colour so
     magenta, the action colour, never has to mean "error". */
  --success: #2ebd68;
  --danger: #ff8078;
  --control-edge: #66637e;

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* Act 1 chrome. No Microsoft fonts are served as web fonts; these are local
     lookups with generic fallbacks, so nothing is redistributed. */
  --font-retro: "Pixelated MS Sans Serif", Geneva, Verdana, Tahoma, sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.8rem);
  --step-4: clamp(2.8rem, 1.8rem + 4.6vw, 6.4rem);
  --step-5: clamp(3.4rem, 1.8rem + 7vw, 9rem);

  /* Space */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;
  --sp-9: 10rem;

  /* Layout */
  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --page: 1240px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-crt: cubic-bezier(0.9, 0, 0.1, 1);

  --radius: 14px;
  --radius-sm: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-out: linear;
    --ease-in-out: linear;
    --ease-crt: linear;
  }
}