/* DESIGN.md §3 tokens: dark (default) and [data-theme="light"] (DESIGN §3 light line).
   Contrast is a test (src/model/contrast.rs): text >= 4.5:1, lines >= 3:1 against --bg.
   --faint is #717b8c, not DESIGN's #5a6474 (3.35:1, under rule 12's 4.5:1 for tick and unit text).
   --ramp-slow/--ramp-fast are the map's speed ramp ends (light: faster = deeper orange, so the
   fast end keeps 3:1 on white). --you-text / --ref-text are the text colors: the light theme's --you #c77800 and --ref #0072b2 are
   3:1 line colors; the text ones keep 4.5:1 even on a bar block's 30 % tint (review F12).
   Font: Inter 4.1 (InterVariable.woff2 + OFL.txt from
   https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip). */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #07080b;
  --surface-top: rgba(255, 255, 255, 0.035);
  --surface-bottom: rgba(255, 255, 255, 0.015);
  --border: rgba(255, 255, 255, 0.06);
  --highlight: rgba(255, 255, 255, 0.04);
  --grid: rgba(255, 255, 255, 0.06);
  --text: #f2f4f7;
  --muted: #8c95a6;
  --faint: #717b8c;
  --you: #ffa62b;
  --you-text: #ffa62b;
  --ref: #5cc8ff;
  --ref-text: #5cc8ff;
  --track: #1b1f27;
  --glass: rgba(10, 12, 16, 0.62);
  --glass-border: rgba(255, 255, 255, 0.09);
  --tint-you: rgba(255, 166, 43, 0.07);
  --tint-ref: rgba(92, 200, 255, 0.07);
  --select: rgba(92, 200, 255, 0.16);
  --select-edge: rgba(92, 200, 255, 0.7);
  --handle: #f2f4f7;
  --ramp-slow: #c27400;
  --ramp-fast: #ffd08f;
  --seg-on: rgba(255, 255, 255, 0.08);
  --tile: rgba(255, 255, 255, 0.025);
  --dashed: rgba(255, 255, 255, 0.12);
  --on-you: #1a1204;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-20: 20px;
  --fs-28: 28px;
  --fs-40: 40px;

  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;

  --r-card: 14px;
  --r-video: 10px;
  --r-button: 7px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface-top: #ffffff;
  --surface-bottom: #fbfcfd;
  --border: rgba(12, 18, 28, 0.09);
  --highlight: rgba(255, 255, 255, 0.7);
  --grid: rgba(12, 18, 28, 0.08);
  --text: #14171c;
  --muted: #5b6472;
  --faint: #656e7c;
  --you: #c77800;
  --you-text: #784600;
  --ref: #0072b2;
  --ref-text: #005a8c;
  --track: #dde1e7;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(12, 18, 28, 0.1);
  --tint-you: rgba(199, 120, 0, 0.06);
  --tint-ref: rgba(0, 114, 178, 0.06);
  --select: rgba(0, 114, 178, 0.12);
  --select-edge: rgba(0, 114, 178, 0.7);
  --handle: #14171c;
  --ramp-slow: #bf760e;
  --ramp-fast: #7a4800;
  --seg-on: rgba(12, 18, 28, 0.08);
  --tile: rgba(12, 18, 28, 0.03);
  --dashed: rgba(12, 18, 28, 0.16);
  --on-you: #ffffff;
}