/* base.css: design tokens + body reset — split out of rally.css. */
/* ============================================================
   Rally Alpha — Design System
   Tokens + primitives. Port of Rally Alpha design tokens.css,
   adapted for vanilla DOM (no React).
   ============================================================ */

:root {
  /* Accent hues (OKLCH hue channel) */
  --hue-pos: 180;
  --hue-neg: 12;
  --hue-info: 250;

  /* Background tint */
  --bg-hue: 250;
  --bg-chroma: 0.015;

  /* Density + radii */
  --density: 1;
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;

  /* Surfaces */
  --bg-0: oklch(0.14 var(--bg-chroma) var(--bg-hue));
  --bg-1: oklch(0.18 var(--bg-chroma) var(--bg-hue));
  --bg-2: oklch(0.22 var(--bg-chroma) var(--bg-hue));
  --bg-3: oklch(0.27 var(--bg-chroma) var(--bg-hue));
  --surf:    oklch(0.19 var(--bg-chroma) var(--bg-hue));
  --surf-hi: oklch(0.23 var(--bg-chroma) var(--bg-hue));

  --line:        oklch(0.28 0.01 var(--bg-hue) / 0.6);
  --line-strong: oklch(0.35 0.015 var(--bg-hue) / 0.8);

  /* Text ramp */
  --text-1: oklch(0.96 0.005 var(--bg-hue));
  --text-2: oklch(0.78 0.01 var(--bg-hue));
  --text-3: oklch(0.58 0.012 var(--bg-hue));
  --text-4: oklch(0.42 0.012 var(--bg-hue));

  /* Semantic colors */
  --pos:     oklch(0.78 0.14 var(--hue-pos));
  --pos-dim: oklch(0.45 0.10 var(--hue-pos));
  --pos-bg:  oklch(0.30 0.08 var(--hue-pos) / 0.18);

  --neg:     oklch(0.72 0.18 var(--hue-neg));
  --neg-dim: oklch(0.45 0.12 var(--hue-neg));
  --neg-bg:  oklch(0.30 0.12 var(--hue-neg) / 0.18);

  --info:     oklch(0.74 0.15 var(--hue-info));
  --info-dim: oklch(0.45 0.12 var(--hue-info));
  --info-bg:  oklch(0.32 0.10 var(--hue-info) / 0.22);

  --warn: oklch(0.82 0.15 85);

  /* Spacing scale */
  --sp-1: calc(4px  * var(--density));
  --sp-2: calc(6px  * var(--density));
  --sp-3: calc(8px  * var(--density));
  --sp-4: calc(12px * var(--density));
  --sp-5: calc(16px * var(--density));
  --sp-6: calc(24px * var(--density));

  --row:  calc(22px * var(--density));
  --ctrl: calc(26px * var(--density));
  --head: calc(48px * var(--density));

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Glows */
  --glow-pos:  0 0 0 1px oklch(0.6 0.14 var(--hue-pos)  / 0.35), 0 0 18px oklch(0.6 0.14 var(--hue-pos)  / 0.15);
  --glow-info: 0 0 0 1px oklch(0.6 0.14 var(--hue-info) / 0.40), 0 0 18px oklch(0.6 0.14 var(--hue-info) / 0.20);
  --glow-neg:  0 0 0 1px oklch(0.6 0.14 var(--hue-neg)  / 0.35), 0 0 18px oklch(0.6 0.14 var(--hue-neg)  / 0.15);

  --shadow-lg: 0 30px 60px -20px oklch(0 0 0 / 0.6), 0 18px 36px -18px oklch(0 0 0 / 0.5);
}

/* ------------------------------------------------------------
   Base reset
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-0);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--info); text-decoration: none; }
a:hover { color: var(--text-1); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: oklch(0.35 0.01 var(--bg-hue)); }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }