/* CSS Variables - Theme System */
:root {
  /* Light Theme (default) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-card: #FFFFFF;
  --bg-hover: #F0F2F5;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border-color: #E5E7EB;
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --accent-light: #EFF6FF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: 200ms ease;
}

[data-theme="dark"] {
  --bg-primary: #0F0F0F;
  --bg-secondary: #1A1A1A;
  --bg-card: #1A1A1A;
  --bg-hover: #252525;
  --text-primary: #E5E5E5;
  --text-secondary: #A3A3A3;
  --text-muted: #737373;
  --border-color: #2A2A2A;
  --accent: #60A5FA;
  --accent-hover: #3B82F6;
  --accent-light: #1E3A5F;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}