/* Lenskit — MIT License — see LICENSE
   Design tokens. Defaults are the Tralfamadore look: a deep vacuum ground, instrument glass, and
   the chrono palette (cobalt past → white-hot now → amber future).

   src/core/theme.js rewrites the base tokens from config.theme / config.fonts at boot. The derived
   tokens below each group are hand-tuned for the defaults; theme.js recomputes them only when their
   source colour is overridden in config. Anything else here is yours to edit. */

:root {
  /* ---------- base (theme.js writes these from config) ---------- */
  --vacuum: #05060B;
  --accent: #FFC98A;
  --accent-rgb: 255, 201, 138;
  --on-accent: #150F07;             /* text on accent-filled controls */
  --text: #E7E4F2;
  --muted: #8C90A8;
  --faint: #80849C;
  --glass: rgba(10, 12, 22, .72);
  --hair: #1C2034;
  --past: #4F7BFF;
  --now: #FFF6E6;
  --future: #FF9A4D;
  --chrono: linear-gradient(90deg, #4F7BFF 0%, #8EA9FF 30%, #FFF6E6 50%, #FFC08A 70%, #FF9A4D 100%);

  --f-display: "Unbounded", "Hanken Grotesk", system-ui, sans-serif;
  --f-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-quote: "Newsreader", Georgia, "Times New Roman", serif;

  /* ---------- derived from chrono (recomputed when config.theme.chrono changes) ---------- */
  --rail-0: #3B5FD9;                /* chronometer rail: deep past */
  --rail-1: #5E86FF;                /* past */
  --rail-2: #BFD0FF;                /* pale past, just before the needle */
  --rail-4: #FFC690;                /* pale future, just after the needle */
  --rail-6: #C4602A;                /* deep future */
  --needle-glow: rgba(255, 214, 160, .85);
  --needle-glow-2: rgba(255, 170, 90, .45);

  /* ---------- derived from glass / hair (recomputed when those change) ---------- */
  --glass-2: rgba(16, 19, 34, .78);           /* hovered glass */
  --glass-solid: rgba(10, 12, 22, .9);        /* low quality: no blur behind, so less see-through */
  --glass-2-solid: rgba(16, 19, 34, .93);
  --sheet-bg: rgba(10, 12, 22, .86);          /* phone bottom sheet */
  --hair-2: #262B44;

  /* ---------- neutrals of the dark UI ---------- */
  --text-2: #CFCBDD;                /* lede, loader */
  --body: #B9B7CA;                  /* caption and about body copy */
  --cell: #C4C1D2;                  /* shortcut descriptions */
  --card-sub-on: #B9B4C6;           /* sub-label on a selected card */
  --error: #FF9A80;
  --error-text: #C9C5D6;
  --error-edge: rgba(255, 120, 100, .28);
  --error-bg: rgba(14, 12, 20, .9);
  --reject: #FF6B6B;
  --modal-bg: rgba(12, 14, 26, .9);
  --backdrop: rgba(3, 4, 9, .62);
  --vignette: rgba(2, 3, 7, .55);
  --option-bg: #0E1120;
  --edge-hover: #343A5A;            /* button border on hover */
  --track: #2A2F48;                 /* slider track */
  --switch-bg: #1A1E31;
  --knob: #7D8199;
  --knob-hover: #A3A7BD;
  --drop-edge: #343A58;
  --drop-edge-hover: #4A5178;
  --scrollbar: #2A2F4A;
  --scrollbar-thumb: #242942;
  --grab: #3A3F5C;
  --grab-hover: #525877;
  --chip: rgba(255, 255, 255, .035);
  --chip-hover: rgba(255, 255, 255, .065);

  /* ---------- layout + motion ---------- */
  --gutter: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --top-h: 72px;
  --tl-h: 52px;
  --panel-w: 312px;
  --radius: 14px;
  --radius-s: 9px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ring: 0 0 0 2px var(--vacuum), 0 0 0 4px rgba(var(--accent-rgb), .9), 0 0 18px rgba(var(--accent-rgb), .35);

  color-scheme: dark;
}