/* Midnight theme: the Claude v3 design tokens (tokens.css, the source of truth) and the self-hosted Jost web font
   (SIL OFL 1.1, fonts/Jost-OFL.txt). Served at /brand/midnight/theme.css (scripts/brand-assets.mjs); the quiz page links
   it from the brand config. font-display: swap, so text paints at once in the fallback face. */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: dark;

  /* ── Colour: palette ─────────────────────────────────────────── */
  --color-night-950: #03050B;      /* behind the device frame (prototype only) */
  --color-night-900: #060A14;      /* midnight: app background, top of the sky */
  --color-night-850: #0A1020;      /* sky near the horizon, scan panel */
  --color-night-800: #0F172B;      /* surfaces */
  --color-night-700: #172139;      /* raised: inputs, checkbox bed */
  --color-night-500: #5E6B89;      /* control edges (3.7:1) */
  --color-moon-100: #EEF1F7;       /* moonlight: text, lines on the palm (17:1) */
  --color-moon-300: #A9B3C7;       /* secondary text (9.4:1) */
  --color-moon-500: #76839F;       /* tertiary, pending steps (5.2:1) */
  --color-gold-300: #F2D6A2;       /* moon gold: the pen, live values, highlights (14:1) */
  --color-gold-500: #D9B474;       /* moon gold, deeper: pressed */
  --color-blue-400: #8FB3E8;       /* moonlit blue: crease map mid-tone, glows */
  --color-coral-400: #FF9B8A;      /* errors (9.7:1) */
  --color-glass: rgba(238, 241, 247, 0.08);   /* soft surfaces and secondary buttons */
  --color-glass-strong: rgba(238, 241, 247, 0.14);
  --color-halo: rgba(6, 10, 20, 0.92);        /* halo behind text drawn on the photo */
  --color-glow: rgba(190, 212, 255, 0.55);    /* moonlight glow around lines */
  --color-scrim: rgba(6, 10, 20, 0.82);       /* camera view outside the hand outline */

  /* ── Colour: roles ───────────────────────────────────────────── */
  --bg: var(--color-night-900);
  --panel: var(--color-night-850);
  --surface: var(--color-night-800);
  --surface-raised: var(--color-night-700);
  --border-control: var(--color-night-500);
  --text: var(--color-moon-100);
  --text-muted: var(--color-moon-300);
  --text-faint: var(--color-moon-500);
  --accent: var(--color-gold-300);
  --line: var(--color-moon-100);
  --danger: var(--color-coral-400);
  --focus-ring: var(--color-gold-300);
  --on-light: var(--color-night-900);

  /* ── Type: one family, Jost (a Futura revival; Futura is the typeface on the Apollo 11 lunar plaque) ── */
  --font: "Jost", "Futura", "Century Gothic", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
  /*               weight size/line-height family */
  --type-display:  300 40px/46px var(--font);
  --type-title-1:  300 32px/38px var(--font);
  --type-title-2:  400 24px/30px var(--font);
  --type-title-3:  500 19px/26px var(--font);
  --type-body:     400 17px/26px var(--font);     /* running text */
  --type-label:    500 16px/22px var(--font);
  --type-button:   500 17px/20px var(--font);
  --type-caps:     500 14px/18px var(--font);     /* small capitals: set uppercase, tracking 0.18em */
  --type-data-xl:  300 48px/50px var(--font);     /* live numbers, tabular */
  --type-data-lg:  300 30px/34px var(--font);
  --type-data:     400 16px/22px var(--font);
  --type-wordmark: 400 16px/20px var(--font);     /* uppercase, tracking 0.34em */
  --tracking-display: -0.01em;
  --tracking-caps: 0.18em;
  --tracking-wordmark: 0.34em;

  /* ── Spacing (4-pt) ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --gutter: var(--space-6);

  /* ── Sizes & strokes ──────────────────────────────────────────── */
  --control-height: 56px;
  --hit-min: 48px;
  --checkbox-size: 26px;
  --stroke-line: 1.8px;         /* palm lines: fine, like a pen on a chart */
  --stroke-glow: 7px;           /* blurred moonlight under each line */
  --stroke-constellation: 1px;  /* 21-point hand skeleton */
  --star-radius: 2.4px;         /* hand points */
  --stroke-measure: 1.2px;      /* calipers, circles */
  --device-width: 390px;

  /* ── Radii ────────────────────────────────────────────────────── */
  --radius-sm: 8px;             /* checkbox, small chips */
  --radius-md: 14px;            /* buttons, inputs, soft surfaces */
  --radius-lg: 22px;            /* sheets */
  --radius-device: 34px;        /* prototype frame only */

  /* ── Motion ───────────────────────────────────────────────────── */
  --dur-press: 120ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-rise: 700ms;            /* "moonrise": content rises 14px and fades in */
  --dur-screen: 520ms;
  --dur-point: 70ms;            /* stagger between the 21 hand points */
  --dur-bone: 180ms;
  --dur-outline: 900ms;
  --dur-layer: 950ms;           /* one image layer wiped in, wrist to fingertips */
  --dur-layer-hold: 500ms;
  --pen-speed: 0.36;            /* px per ms while a line is traced */
  --dur-trace-min: 1000ms;
  --dur-trace-max: 1800ms;
  --dur-line-hold: 650ms;
  --dur-caliper: 800ms;
  --dur-guidance: 1700ms;       /* prototype only: camera guidance auto-advance */
  --sky-timelapse: 240;         /* sky rotates at 240× real time: 1° per second around Polaris */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pen: cubic-bezier(0.45, 0.05, 0.35, 1);
  --ease-wipe: cubic-bezier(0.7, 0, 0.25, 1);
}