/* Milky Way Insider design tokens.
   Palette and type are from the Visual Branding Book (Figma, "Exports Slides"). See DESIGN_AUDIT.md.
   The default ground is the Void sky. Every other surface is a ground class that sets the text, lines and
   actions that belong on it, so components work anywhere by reading those variables. */

:root {
  /* Palette */
  --black: #000;
  --void: #000621;
  --deep: #182276;
  --cosmic: #506cd9;
  --orbit: #d13f30;
  --nebula: #f6aac8;
  --kiwi: #4daa48;
  --ufo: #22d974;
  --gold: #ead11f;
  --cream: #ffe3c5;
  --moon: #f7f7f5;
  --star: #fff;

  /* Status: good, waiting, stopped, information */
  --good: #0f7a3d;
  --wait: #7a6500;
  --stop: #b32a1d;
  --info: var(--deep);

  /* Type */
  --f-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --f-text: "Mozilla Headline", "Helvetica Neue", Arial, sans-serif;
  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --d-sm: clamp(1.45rem, 1.3rem + .6vw, 1.85rem);
  --d-md: clamp(2rem, 1.6rem + 1.7vw, 3rem);
  --d-lg: clamp(2.9rem, 2rem + 3.9vw, 5rem);
  --d-xl: clamp(3.8rem, 1.8rem + 8.6vw, 8.5rem);

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: clamp(64px, 9vw, 112px);
  --s-10: clamp(88px, 13vw, 168px);
  --gutter: clamp(16px, 4.4vw, 64px);
  --max: 1320px;
  --measure: 62ch;

  /* Edges */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 22px;
  --r-pill: 999px;
  --hair: 1px;
  --rule: 1.5px;

  /* Depth. The brand's shadow is a sharp block; soft shadows are only for things that float. */
  --block: .16em .18em 0 var(--void);
  --float: 0 18px 50px rgb(0 3 20 / .6);
  --lift: 0 30px 70px rgb(0 3 20 / .62);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-swing: cubic-bezier(.45, .05, .25, 1);
  --ease-back: cubic-bezier(.3, 1.5, .5, 1);
  --m-fast: .14s;
  --m-med: .28s;
  --m-slow: .7s;
  --m-reveal: .9s;

  /* Layers */
  --z-sticky: 30;
  --z-nav: 40;
  --z-dock: 50;
  --z-toast: 90;

  /* Breakpoints, for reference: 600px phone, 900px tablet, 1200px desktop. */

  /* Nebula Noise: the grain every colour field carries. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --halftone: radial-gradient(circle, rgb(247 247 245 / .22) 1px, transparent 1.4px);
}

/* Grounds */
:root, .g-black, .g-sky {
  color-scheme: dark;
  --bg: var(--void);
  --fg: var(--moon);
  --fg-2: rgb(247 247 245 / .8);
  --fg-3: rgb(247 247 245 / .62);
  --line: rgb(247 247 245 / .16);
  --line-2: rgb(247 247 245 / .38);
  --raise: rgb(247 247 245 / .05);
  --raise-2: rgb(247 247 245 / .1);
  --accent: var(--gold);
  --on-accent: var(--void);
  --press: #8d7c06;
  --focus: var(--gold);
  --good-on: var(--ufo);
  --wait-on: var(--gold);
  --stop-on: #ff9184;
  --info-on: #aebcf5;
}
.g-black { --bg: var(--black); }
.g-paper, .g-cream, .g-gold, .g-nebula, .g-ufo, .g-kiwi {
  color-scheme: light;
  --fg: var(--void);
  --fg-2: rgb(0 6 33 / .8);
  --fg-3: rgb(0 6 33 / .66);
  --line: rgb(0 6 33 / .16);
  --line-2: rgb(0 6 33 / .42);
  --raise: rgb(255 255 255 / .62);
  --raise-2: rgb(255 255 255 / .9);
  --accent: var(--void);
  --on-accent: var(--moon);
  --press: var(--deep);
  --focus: var(--void);
  --good-on: var(--good);
  --wait-on: var(--wait);
  --stop-on: var(--stop);
  --info-on: var(--deep);
}
.g-paper { --bg: var(--moon); --raise: var(--star); --raise-2: #eeeeea; --focus: var(--cosmic); }
.g-cream { --bg: var(--cream); }
.g-gold { --bg: var(--gold); }
.g-nebula { --bg: var(--nebula); }
.g-ufo { --bg: var(--ufo); }
.g-kiwi { --bg: var(--kiwi); --fg-2: var(--void); --fg-3: var(--void); }
.g-gold, .g-ufo { --fg-2: rgb(0 6 33 / .86); --fg-3: rgb(0 6 33 / .76); }
.g-orbit, .g-cosmic, .g-deep, .g-void {
  color-scheme: dark;
  --fg: var(--star);
  --fg-2: var(--star);
  --fg-3: rgb(255 255 255 / .9);
  --line: rgb(255 255 255 / .28);
  --line-2: rgb(255 255 255 / .6);
  --raise: rgb(0 6 33 / .22);
  --raise-2: rgb(0 6 33 / .34);
  --accent: var(--star);
  --on-accent: var(--void);
  --press: rgb(0 6 33 / .7);
  --focus: var(--star);
  --good-on: var(--star);
  --wait-on: var(--star);
  --stop-on: var(--star);
  --info-on: var(--star);
}
.g-orbit { --bg: var(--orbit); }
.g-cosmic { --bg: var(--cosmic); }
.g-deep { --bg: var(--deep); --fg-3: rgb(255 255 255 / .78); }
.g-void { --bg: var(--void); --fg-2: rgb(255 255 255 / .8); --fg-3: rgb(255 255 255 / .66); --line: rgb(255 255 255 / .16); --raise: rgb(255 255 255 / .06); --raise-2: rgb(255 255 255 / .12); --accent: var(--gold); --press: #8d7c06; --focus: var(--gold); }
.g-black, .g-paper, .g-cream, .g-gold, .g-nebula, .g-ufo, .g-kiwi, .g-orbit, .g-cosmic, .g-deep, .g-void { background-color: var(--bg); color: var(--fg); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.5;
  font-feature-settings: "zero";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold); color: var(--void); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1[tabindex="-1"]:focus { outline: 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); }
::-webkit-scrollbar-track { background: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px; background: var(--gold); color: var(--void); font-weight: 600; translate: 0 -200%; }
.skip:focus { translate: 0; }

/* Type */
.t-poster, .t-title, .t-head, .t-sub {
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  text-wrap: balance;
}
.t-poster { font-size: var(--d-xl); line-height: .86; }
.t-title { font-size: var(--d-lg); line-height: .9; }
.t-head { font-size: var(--d-md); line-height: .94; }
.t-sub { font-size: var(--d-sm); line-height: 1; }
.t-lede { max-width: var(--measure); color: var(--fg-2); font-size: var(--t-xl); line-height: 1.4; text-wrap: pretty; }
.t-body { max-width: var(--measure); color: var(--fg-2); text-wrap: pretty; }
.t-prose { max-width: var(--measure); color: var(--fg-2); white-space: pre-line; overflow-wrap: anywhere; }
.t-note { color: var(--fg-3); font-size: var(--t-sm); }
.t-key { color: var(--fg-3); font-size: var(--t-sm); font-weight: 500; }
.t-figure {
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 800;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; }
.t-code { font-feature-settings: "zero"; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}