:root {
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --accent-50: #ecfeff;
  --accent-100: #cffafe;
  --accent-200: #a5f3fc;
  --accent-300: #67e8f9;
  --accent-400: #22d3ee;
  --accent-500: #06b6d4;
  --accent-600: #0891b2;
  --accent-700: #0e7490;
  --accent-800: #155e75;
  --accent-900: #164e63;

  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f1f3fb;
  --border: #d7dce9;
  --text: #1c1e27;
  --text-muted: #5b6170;

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0ea5e9;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 6px 20px rgba(15, 23, 42, 0.12);
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

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

  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b10;
    --surface: #121218;
    --surface-2: #181925;
    --border: #2a2b3a;
    --text: #e7e9ee;
    --text-muted: #a7adbb;
  }
}

html.theme-dark {
  --bg: #0b0b10;
  --surface: #121218;
  --surface-2: #181925;
  --border: #2a2b3a;
  --text: #e7e9ee;
  --text-muted: #a7adbb;
}