/*
 * CSS Variables and Theme
 * Color palette for light and dark modes
 */

:root {
  --bg-primary: #fafafa;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #f0f0f0;
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --text-muted: #a1a1aa;
  --accent-primary: #6366f1;
  --accent-secondary: #4f46e5;
  --accent-green: #059669;
  --accent-warm: #f59e0b;
  --accent-red: #dc2626;
  --accent-blue: #2563eb;
  --accent-purple: #7c3aed;
  --border-color: #e4e4e7;
  --sidebar-width: 240px;

  /* Type scale */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-lg: 16px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 32px;
}

[data-theme="dark"] {
  --bg-primary: #1e1e22;
  --bg-secondary: #26262b;
  --bg-tertiary: #2e2e34;
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent-primary: #818cf8;
  --accent-secondary: #6366f1;
  --accent-green: #10b981;
  --accent-warm: #fbbf24;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --border-color: #3f3f46;
}