:root {
  --bg-0: #eef2f7;
  --bg-1: #cdd8e4;
  --ink: #0f172a;
  --muted: #64748b;
  --panel: rgba(240, 244, 248, 0.8);
  --panel-strong: rgba(241, 245, 249, 0.94);
  --line: rgba(15, 23, 42, 0.08);
  --shadow: 0 32px 80px rgba(15, 23, 42, 0.10);
  --accent: #6366f1;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --card-border: var(--line);
  --font-family-ui: "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

@font-face {
  font-family: "Russo One";
  src: url("/fonts/RussoOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

[data-theme="dark"] {
  --bg-0: #0f172a;
  --bg-1: #1e293b;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --panel: rgba(30, 41, 59, 0.8);
  --panel-strong: rgba(30, 41, 59, 0.94);
  --line: rgba(148, 163, 184, 0.10);
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.32);
  --accent: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.14);
  --card-border: rgba(148, 163, 184, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); font-family: var(--font-family-ui); background: linear-gradient(135deg, var(--bg-0), var(--bg-1)); }