:root {
  --brand-50: #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-300: #7dd3fc;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0c4a6e;

  --bg: #0b1220;
  --bg-soft: #0f172a;
  --bg-card: #111827;
  --text: #e5e7eb;
  --text-dim: #94a3b8;
  --accent: var(--brand-500);
  --accent-2: #22c55e;
  --danger: #ef4444;
  --warn: #f59e0b;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --cyan: #06b6d4;
  --glow: rgba(14,165,233,.35);

  --surface: #0f172a;
  --surface-2: #111827;
  --border: #1f2937;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.18);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --bg-card: #0b1220;
  --text: #e5e7eb;
  --text-dim: #94a3b8;
}

html[data-theme="light"] {
  --bg: #f7fafc;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --text: #0f172a;
  --text-dim: #475569;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
}