/* Design tokens: "dawn breaking" — deep indigo rising into sunrise amber.
   Every colour pair used for text is checked against WCAG AA by test/design.test.js,
   so change values here and run `npm test`. Keep colours as 6-digit hex (the test reads them). */
:root {
  color-scheme: dark;

  /* Night sky: page and surface backgrounds */
  --night-950: #0b0820;
  --night-900: #130e33;
  --indigo-800: #1c1550;
  --indigo-700: #292070;
  --indigo-600: #3b2e94;
  --indigo-500: #5646c2;

  /* Twilight: the band between night and sunrise (decoration and glows, never body text) */
  --dusk-violet: #8a5cd0;
  --dusk-rose: #e0709a;
  --dusk-coral: #ff8a6b;

  /* Sunrise: accents, links, buttons */
  --amber-200: #ffe3a8;
  --amber-300: #ffd27a;
  --amber-400: #ffbf5c;
  --amber-500: #ff9f3d;
  --amber-600: #f47c2a;

  /* Text */
  --cream: #fff4e0;        /* primary text */
  --mist: #c9c2ec;         /* secondary text */
  --mist-dim: #a79fd6;     /* tertiary text */

  /* Semantic roles (use these in components, not the raw scale) */
  --bg: var(--night-900);
  --bg-deep: var(--night-950);
  --surface: var(--indigo-800);
  --surface-raised: var(--indigo-700);
  --border: #6a5cc8;
  --text: var(--cream);
  --text-muted: var(--mist);
  --text-faint: var(--mist-dim);
  --accent: var(--amber-400);
  --accent-strong: var(--amber-500);
  --accent-text: var(--night-950);   /* text on accent fills */
  --focus: var(--amber-300);

  /* Gradients */
  --gradient-dawn: linear-gradient(180deg,
    var(--night-950) 0%, var(--night-900) 28%, var(--indigo-700) 55%,
    var(--dusk-violet) 74%, var(--dusk-rose) 88%, var(--amber-500) 100%);
  /* Time-aware sky (static/js/sky.js picks one from the visitor's clock; see css/hero.css).
     Hero words sit in the top 60% of these, so every stop up to 62% keeps AA against cream and
     amber text (test/sky.test.js). Below that they are free to go bright. */
  --sky-day-1: #12266e;
  --sky-day-2: #1a3585;
  --sky-day-3: #2454b0;
  --sky-day-4: #5b93e0;
  --sky-day-5: #a9d4f5;
  --sky-morning-1: #1f2a80;
  --sky-morning-2: #3a4fb0;
  --sky-morning-3: #b070c0;
  --sky-dusk-1: #3d2585;
  --sky-dusk-2: #7a3a94;
  --sky-dusk-3: #d95f92;
  --gradient-night: linear-gradient(180deg, var(--night-950) 0%, var(--night-900) 62%, var(--indigo-800) 100%);
  --gradient-morning: linear-gradient(180deg,
    var(--night-900) 0%, var(--sky-morning-1) 30%, var(--sky-morning-2) 58%,
    var(--sky-morning-3) 76%, var(--dusk-rose) 90%, var(--amber-300) 100%);
  --gradient-day: linear-gradient(180deg,
    var(--sky-day-1) 0%, var(--sky-day-2) 32%, var(--sky-day-3) 60%,
    var(--sky-day-4) 80%, var(--sky-day-5) 100%);
  --gradient-dusk: linear-gradient(180deg,
    var(--indigo-800) 0%, var(--sky-dusk-1) 38%, var(--sky-dusk-2) 60%,
    var(--sky-dusk-3) 80%, var(--dusk-coral) 91%, var(--amber-400) 100%);
  --gradient-sunrise: linear-gradient(135deg, var(--amber-300), var(--amber-500) 55%, var(--dusk-coral));
  --gradient-surface: linear-gradient(160deg, var(--indigo-700), var(--indigo-800));

  /* Soft glow */
  --glow-amber: 0 0 0 1px rgb(255 191 92 / 0.25), 0 0 28px rgb(255 159 61 / 0.35);
  --glow-amber-lg: 0 0 0 1px rgb(255 191 92 / 0.3), 0 0 64px rgb(255 159 61 / 0.45);
  --glow-indigo: 0 8px 32px rgb(11 8 32 / 0.55), 0 0 0 1px rgb(138 92 208 / 0.2);
  --glow-star: 0 0 12px rgb(255 244 224 / 0.9), 0 0 32px rgb(255 227 168 / 0.5);

  /* Pixel art (hero scenery). Names match the palette names in site/data/hero.yml. */
  --px-outline: var(--night-950);
  --px-red: var(--dusk-coral);
  --px-red-dark: #d9566f;
  --px-hull: var(--cream);
  --px-hull-shade: var(--mist);
  --px-hull-dark: var(--mist-dim);
  --px-window: var(--amber-500);
  --px-window-glow: var(--amber-200);
  --px-steel: #5a4bb8;
  --px-steel-light: #7a6bdc;
  --px-steel-dark: #3b2e94;
  --px-lamp: var(--amber-400);
  --px-flame-core: var(--amber-200);
  --px-flame: var(--amber-500);
  --px-flame-edge: var(--dusk-coral);
  --px-smoke: var(--mist);
  --px-sun-rim: var(--amber-600);
  --px-sun-outer: var(--amber-500);
  --px-sun-mid: var(--amber-400);
  --px-sun-core: var(--amber-200);

  /* Alicia's star (site/data/alicia.yml). Warm and quiet, never brighter than the sun. */
  --px-alicia-tip: var(--amber-400);
  --px-alicia-body: var(--amber-200);
  --px-alicia-bright: var(--cream);
  --px-alicia-core: #ffffff;

  /* Crew sprites (site/data/crew.yml). Names match the colour names in the crew and sprite data.
     Skin and hair are placeholders until the family picks its own. */
  --sp-ink: var(--night-950);
  --sp-skin: #f6cfa8;
  --sp-skin-shade: #c98462;
  --sp-blush: #ef8d8d;
  --sp-mouth: #b04a5e;
  --sp-hair-plum: #5b2f6b;
  --sp-hair-plum-shade: #3f2050;
  --sp-hair-brown: #7a4a2e;
  --sp-hair-brown-shade: #57331f;
  --sp-hair-dark: #2e2440;
  --sp-hair-dark-shade: #1d1630;
  --sp-hair-auburn: #b8562f;
  --sp-hair-auburn-shade: #8c3d20;
  --sp-hair-gold: #e8b84f;
  --sp-hair-gold-shade: #c48f2c;
  --sp-rose: var(--dusk-rose);
  --sp-rose-shade: #b5507a;
  --sp-teal: #38b6b0;
  --sp-teal-shade: #2a8a86;
  --sp-mint: #6fd6a0;
  --sp-mint-shade: #4aa87a;
  --sp-amber: var(--amber-400);
  --sp-amber-shade: #d98f2e;
  --sp-violet: var(--dusk-violet);
  --sp-violet-shade: #6a3fae;
  --sp-coral: var(--dusk-coral);
  --sp-coral-shade: #d9566f;
  --sp-sky: #6ec6ff;
  --sp-sky-shade: #4a9fd6;
  --sp-denim: #4a55b8;
  --sp-denim-shade: #343d8e;
  --sp-khaki: #c9b27c;
  --sp-khaki-shade: #a58f5e;
  --sp-slate: #5b5f80;
  --sp-slate-shade: #444764;
  --sp-shoe: var(--cream);
  --sp-shoe-shade: var(--mist);

  /* Type */
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-pixel: "Pixelify Sans", ui-monospace, monospace;

  --text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --text-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --text-3xl: clamp(2.3rem, 1.6rem + 3.5vw, 4.5rem);
  --leading-tight: 1.15;
  --leading-body: 1.65;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape: rounded everywhere */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  /* Layout. Breakpoints (media queries can't read variables): 40em, 64em, 96em. */
  --measure: 62ch;
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}