/* The design tokens and the one font. Every other file reads these names;
   none of them sets a colour, radius or ring of its own. */

/* Inter Variable, self-hosted (OFL, see fonts/LICENSE.txt). layout.js
   preloads this same URL, ?v= included, so keep the two in step. */
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable.woff2?v=12") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Canvas and surfaces */
  --canvas: #000000;
  --edge: #08090a;
  --card: #0f1011;
  --tile: #151515;
  --raised: #1a1a1a;
  --seg-on: #2c2c2e;
  --icon-btn: #222222;
  --ghost-fill: #ffffff0d;
  --hover-fill: #ffffff06;
  --mono-fill: #ffffff11;
  --tabbar-fill: #1c1c1f;

  /* Hairlines */
  --hairline: #23252a;
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --divider: #ffffff0f;

  /* Text. Dim is for icons, rings and text at 24px or larger only. */
  --ink: #f7f8f8;
  --ink-2: #d0d6e0;
  --ink-muted: #8a8f98;
  --ink-dim: #62666d;
  --pill-fill: #e5e5e6;
  --pill-ink: #08090a;

  /* Moves */
  --up: #6cd474;
  --down: #eb5757;
  --live: #4cb782;
  --live-ring: rgba(76, 183, 130, 0.2);
  --down-ring: rgba(235, 87, 87, 0.2);

  /* Chart */
  --chart-line: #5468ff;
  --chart-tag: #3848f4;
  --chart-ring: #364aff;
  --chart-dots: radial-gradient(circle, rgba(255, 255, 255, 0.094) 1px, transparent 1px);

  /* Score tiers */
  --tier-low: #6cd474;
  --tier-medium: #f0a146;
  --tier-high: #ea580c;
  --tier-critical: #eb5757;
  --tier-none: #8a8f98;

  /* Radii */
  --r-chip: 6px;
  --r-logo: 8px;
  --r-segment: 8px;
  --r-input: 10px;
  --r-tile: 12px;
  --r-row: 12px;
  --r-panel: 14px;
  --r-card: 16px;
  --r-frame: 18px;
  --r-pill: 9999px;

  /* Rings */
  --ring-card: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --ring-tile: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ring-frame: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 30px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --ring-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6);
  --ring-logo: 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Glows */
  --glow: radial-gradient(200% 105% at 50% -6%, #03091a 0%, #071025 24%, #0a2765 41%, #0d54e3 60%, #6f9fff 79%, #f7f8f7 97%);
  --glow-mask: linear-gradient(#000 0%, #000 70%, #000b 84%, #0000 100%);
  --glow-h: max(100vh, 760px);
  --sheet-glow: radial-gradient(at 88% 24%, rgba(35, 27, 73, 0.25), transparent 43%);

  /* Type */
  --font: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --w-body: 400;
  --w-heading: 510;
  --w-title: 590;

  /* Layout */
  --page-max: 1344px;
  --gutter: 48px;
  --bar-h: 60px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --quick: 150ms;
  --fade-in: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --quick: 0ms; --fade-in: 0ms; }
}