/* tokens.css: Uncharted Sectors website design tokens
   Palette baseline: visual system spec §6.2 "working web/interface tuning"
   (identical to website spec §9.2). Slots §6.2 lacks are borrowed from §6.1:
   danger crimson for error states, pale gold for strong highlight text.
   This is the implementation reconciliation noted in the site README. */

:root {
  /* Surfaces */
  --bg: #070812;
  --bg-raised: #0E1020;
  --hairline: rgba(241, 238, 249, 0.13);

  /* Text */
  --text: #F1EEF9;
  --text-secondary: #A8A4BC;
  --text-highlight: #F2E3B6; /* §6.1 pale gold, strong highlight text only */

  /* Accents (§6.2). Semantics per §6.3:
     purple + gold = imperial authority; teal = frontier tech/discovery;
     magenta/crimson = danger/urgency. Do not flood sections with all families. */
  --purple: #8C5CFF;
  --gold: #D9AD60;
  --teal: #68D8DA;
  --magenta: #C449A8;

  /* Danger / error (borrowed from §6.1) */
  --danger-crimson: #A62139;   /* large dark danger fields only; fails AA as a foreground */
  --danger-bright: #BD2B61;    /* error markers/borders (3.3:1 on raised, component-grade) */
  --danger-text: #E5849B;      /* tinted crimson, AA-compliant error text on --bg/--bg-raised */

  /* Typography: confirmed from the game (visual system §14) */
  --font-body: "Saira SemiCondensed", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Quantico", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-button: "Quantico", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Type scale */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.55rem;
  --step-3: clamp(1.9rem, 1.3vw + 1.5rem, 2.5rem);
  --step-4: clamp(2.2rem, 4.6vw + 0.5rem, 3.4rem);

  /* Reading measure. Saira SemiCondensed sets far more characters per `ch`
     than a normal-width face (its "0" is narrow), so a 68ch block renders
     around 90 characters per line. 52ch lands near the 70-character target. */
  --measure: 52ch;
  --measure-small: 62ch; /* step--1 notes: smaller type, same optical length */

  /* Layout */
  --max-width: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-gap: clamp(4rem, 10vw, 7.5rem);
  --radius: 4px;
  --header-height: 4.25rem;

  /* Motion */
  --transition: 180ms ease-out;
}