/* theme.css - Theme variables and color palettes */

/* ============================================
   CSS Custom Properties - Theme System
   ============================================ */

:root {
  /* Color Palette - Light Theme (Default) */
  --color-bg: #fffef7;
  --color-text: #0b0b0b;
  --color-primary: #158366;
  --color-secondary: #ffb703;
  --color-accent: #285F98;
  --color-border: #0b0b0b;
  --color-muted: #6b7280;
  --color-error: #dc2626;
  --color-success: #16a34a;
  --color-warning: #ea580c;
  
  /* Surface colors */
  --color-surface: #ffffff;
  --color-surface-alt: #f3f4f6;
  --color-surface-hover: #e5e7eb;
  
  /* Neo-brutalism shadows */
  --shadow: 6px 6px 0 var(--color-border);
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-lg: 8px 8px 0 var(--color-border);
  --shadow-hover: 4px 4px 0 var(--color-border);
  
  /* Border thickness */
  --border-width: 3px;
  --border-width-sm: 2px;
  --border-width-lg: 4px;
  
  /* Border radius (minimal for neo-brutalism) */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  
  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Typography scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-text: #f5f5f5;
  --color-primary: #1ea97c;
  --color-secondary: #ffc233;
  --color-accent: #3d7bbf;
  --color-border: #f5f5f5;
  --color-muted: #9aa3b2;
  --color-error: #f87171;
  --color-success: #4ade80;
  --color-warning: #fb923c;
  
  --color-surface: #1a1d23;
  --color-surface-alt: #23262e;
  --color-surface-hover: #2c2f38;
  
  --shadow: 6px 6px 0 var(--color-border);
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-lg: 8px 8px 0 var(--color-border);
  --shadow-hover: 4px 4px 0 var(--color-border);
}

/* Alternative Color Palettes */
[data-palette="ocean"] {
  --color-primary: #0891b2;
  --color-secondary: #f59e0b;
  --color-accent: #8b5cf6;
}

[data-palette="ocean"][data-theme="dark"] {
  --color-primary: #22d3ee;
  --color-secondary: #fbbf24;
  --color-accent: #a78bfa;
}

[data-palette="forest"] {
  --color-primary: #059669;
  --color-secondary: #dc2626;
  --color-accent: #7c3aed;
}

[data-palette="forest"][data-theme="dark"] {
  --color-primary: #34d399;
  --color-secondary: #f87171;
  --color-accent: #a78bfa;
}

[data-palette="sunset"] {
  --color-primary: #dc2626;
  --color-secondary: #f59e0b;
  --color-accent: #ec4899;
}

[data-palette="sunset"][data-theme="dark"] {
  --color-primary: #f87171;
  --color-secondary: #fbbf24;
  --color-accent: #f472b6;
}

/* Respect user preferences */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1115;
    --color-text: #f5f5f5;
    --color-primary: #1ea97c;
    --color-secondary: #ffc233;
    --color-accent: #3d7bbf;
    --color-border: #f5f5f5;
    --color-muted: #9aa3b2;
    --color-error: #f87171;
    --color-success: #4ade80;
    --color-warning: #fb923c;
    
    --color-surface: #1a1d23;
    --color-surface-alt: #23262e;
    --color-surface-hover: #2c2f38;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}