/* LazyVR design tokens: the planetarium.
 *
 * The house lights go down, one warm lamp stays lit, and the sky moves.
 * Night-indigo grounds (never black, never gray), dusty star-white text,
 * a tungsten accent for the one live thing on screen, brass for anything
 * engraved, ember for caution.  DESIGN.md is the reference; this file is
 * its normative CSS form.
 */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/AtkinsonHyperlegibleNext-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: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/AtkinsonHyperlegibleNext-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 {
  /* -- colour ----------------------------------------------------- */
  --dome: #0b0e1c;         /* the page ground */
  --dome-deep: #060814;    /* behind the sphere; the overlay's base */
  --seat: #141830;         /* raised surfaces: drawer, fields, buttons */
  --seat-2: #1b2040;       /* a raised surface under the pointer */
  --dusk: #3a4680;         /* the rim light: vignette source, ring base */
  --rail: rgba(196, 204, 255, 0.10);   /* every hairline */
  --rail-strong: rgba(196, 204, 255, 0.18);

  --star: #e6e8f5;         /* primary text, numerals */
  --star-dim: #9aa0c2;     /* secondary text, placeholders, hints */
  --star-faint: #5d6388;   /* disabled and decorative only */

  --lamp: #f0b56b;         /* the one accent: the live mark */
  --lamp-deep: #c98a3f;    /* the lamp under pressure */
  --lamp-glow: rgba(240, 181, 107, 0.28);
  --lamp-rim: rgba(240, 181, 107, 0.5);
  --ember: #e08a76;        /* caution */
  --ember-soft: rgba(224, 138, 118, 0.14);
  --brass: #9c8560;        /* ticks, dial marks, key caps */
  --brass-dim: rgba(156, 133, 96, 0.5);
  --scrim: rgba(6, 8, 20, 0.62);

  /* The dusk vignette every full-screen surface carries at its top. */
  --vignette: radial-gradient(120% 70% at 50% 0%, rgba(58, 70, 128, 0.34), transparent 62%);

  /* -- type ------------------------------------------------------- */
  --font: "Atkinson Hyperlegible Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: 700 1.75rem/1 var(--font);
  --t-headline: 600 1.1875rem/1.25 var(--font);
  --t-title: 500 0.875rem/1.4 var(--font);
  --t-body: 400 1rem/1.5 var(--font);
  --t-label: 500 0.75rem/1.3 var(--font);
  --t-numeral: 500 1.5rem/1 var(--font);
  --track-display: -0.02em;
  --track-headline: -0.01em;
  --track-label: 0.02em;
  --track-numeral: 0.01em;

  /* -- space, one 8px unit --------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --gutter: clamp(24px, 4vw, 56px);
  --control: 40px;         /* every button and field is this tall */

  /* -- shape ------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-round: 999px;

  /* -- depth ------------------------------------------------------ */
  --lift: 0 12px 28px rgba(6, 8, 20, 0.55);
  --text-scrim: 0 1px 2px rgba(6, 8, 20, 0.8), 0 0 12px rgba(6, 8, 20, 0.6);

  /* -- motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 180ms;
  --t-slow: 220ms;
}