/* Vibranium — design tokens */

:root {
  /* Typography */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Light theme — warm paper */
  --bg: #F6F5F1;
  --bg-elev: #FBFAF6;
  --bg-sunken: #EEEDE7;
  --surface: #FFFFFF;
  --fg: #0E1113;
  --fg-muted: #5A5E64;
  --fg-subtle: #8A8E94;
  --border: #E2E0D8;
  --border-strong: #CDCBC1;
  --hairline: #EAE8E0;

  /* Accents — single system accent */
  --accent: oklch(0.45 0.09 240);
  --accent-fg: #FFFFFF;
  --accent-weak: oklch(0.95 0.03 240);
  --accent-border: oklch(0.85 0.05 240);

  /* Status — classic, colorblind-safe via shape */
  --ok: oklch(0.58 0.14 150);
  --ok-weak: oklch(0.93 0.04 150);
  --ok-border: oklch(0.82 0.09 150);

  --warn: oklch(0.70 0.15 75);
  --warn-weak: oklch(0.95 0.05 85);
  --warn-border: oklch(0.85 0.10 80);

  --alarm: oklch(0.56 0.21 25);
  --alarm-weak: oklch(0.94 0.04 25);
  --alarm-border: oklch(0.82 0.12 25);

  /* Radii — tight */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Shadows — almost none */
  --shadow-pop: 0 1px 2px rgba(14,17,19,0.04), 0 4px 12px rgba(14,17,19,0.06);

  /* Grid */
  --unit: 4px;
}

.dark {
  --bg: #0B0D0F;
  --bg-elev: #12151A;
  --bg-sunken: #08090B;
  --surface: #15181E;
  --fg: #E6E4DE;
  --fg-muted: #9A9EA5;
  --fg-subtle: #6A6E75;
  --border: #242830;
  --border-strong: #363B45;
  --hairline: #1C2027;

  --accent: oklch(0.72 0.12 240);
  --accent-fg: #0B0D0F;
  --accent-weak: oklch(0.25 0.06 240);
  --accent-border: oklch(0.35 0.08 240);

  --ok: oklch(0.75 0.16 150);
  --ok-weak: oklch(0.22 0.05 150);
  --ok-border: oklch(0.35 0.10 150);

  --warn: oklch(0.80 0.15 75);
  --warn-weak: oklch(0.25 0.06 70);
  --warn-border: oklch(0.38 0.10 75);

  --alarm: oklch(0.70 0.21 25);
  --alarm-weak: oklch(0.25 0.08 25);
  --alarm-border: oklch(0.40 0.14 25);

  --shadow-pop: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* Scrollbar — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.num { font-variant-numeric: tabular-nums; }
.tight { letter-spacing: -0.01em; }
.tighter { letter-spacing: -0.02em; }
.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted);
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }