/* variables.css — Design Tokens */
:root {
  /* Colors */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;

  /* Light theme (default) */
  --bg-primary: #ffffff;
  --bg-secondary: var(--slate-50);
  --bg-tertiary: var(--slate-100);
  --bg-sidebar: var(--slate-900);
  --bg-card: #ffffff;
  --bg-hover: var(--slate-100);
  --bg-input: #ffffff;

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-400);
  --text-sidebar: var(--slate-300);
  --text-sidebar-active: #ffffff;
  --text-inverse: #ffffff;

  --border-color: var(--slate-200);
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-sm: 4px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  --sidebar-width: 260px;
  --header-height: 56px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--slate-900);
    --bg-secondary: var(--slate-800);
    --bg-tertiary: var(--slate-700);
    --bg-sidebar: #0a0f1a;
    --bg-card: var(--slate-800);
    --bg-hover: var(--slate-700);
    --bg-input: var(--slate-700);

    --text-primary: var(--slate-100);
    --text-secondary: var(--slate-400);
    --text-tertiary: var(--slate-500);

    --border-color: var(--slate-700);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  }
}

[data-theme="dark"] {
  --bg-primary: var(--slate-900);
  --bg-secondary: var(--slate-800);
  --bg-tertiary: var(--slate-700);
  --bg-sidebar: #0a0f1a;
  --bg-card: var(--slate-800);
  --bg-hover: var(--slate-700);
  --bg-input: var(--slate-700);

  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-500);

  --border-color: var(--slate-700);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
}