/* Theme System - CSS Custom Properties */

/* Default theme variables (Light theme) */
:root {
  /* Primary colors */
  --theme-primary: #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-primary-light: #dbeafe;
  --theme-primary-dark: #1e40af;
  
  /* Background colors */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f9fafb;
  --theme-bg-tertiary: #f3f4f6;
  --theme-bg-quaternary: #e5e7eb;
  
  /* Text colors */
  --theme-text-primary: #111827;
  --theme-text-secondary: #374151;
  --theme-text-tertiary: #6b7280;
  --theme-text-quaternary: #9ca3af;
  
  /* Border colors */
  --theme-border-primary: #e5e7eb;
  --theme-border-secondary: #d1d5db;
  --theme-border-tertiary: #9ca3af;
  
  /* Accent colors */
  --theme-accent-success: #10b981;
  --theme-accent-warning: #f59e0b;
  --theme-accent-error: #ef4444;
  --theme-accent-info: #3b82f6;
  
  /* Shadow colors */
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-shadow-lg: rgba(0, 0, 0, 0.25);
  
  /* Interactive states */
  --theme-hover-bg: rgba(0, 0, 0, 0.05);
  --theme-active-bg: rgba(0, 0, 0, 0.1);
  --theme-focus-ring: #3b82f6;
  
  /* Theme transitions */
  --theme-transition: all 0.2s ease-in-out;
  --theme-transition-fast: all 0.1s ease-in-out;
}

/* Dark theme */
.theme-dark {
  /* Primary colors */
  --theme-primary: #60a5fa;
  --theme-primary-hover: #3b82f6;
  --theme-primary-light: #1e3a8a;
  --theme-primary-dark: #1d4ed8;
  
  /* Background colors */
  --theme-bg-primary: #111827;
  --theme-bg-secondary: #1f2937;
  --theme-bg-tertiary: #374151;
  --theme-bg-quaternary: #4b5563;
  
  /* Text colors */
  --theme-text-primary: #f9fafb;
  --theme-text-secondary: #e5e7eb;
  --theme-text-tertiary: #d1d5db;
  --theme-text-quaternary: #9ca3af;
  
  /* Border colors */
  --theme-border-primary: #374151;
  --theme-border-secondary: #4b5563;
  --theme-border-tertiary: #6b7280;
  
  /* Accent colors */
  --theme-accent-success: #34d399;
  --theme-accent-warning: #fbbf24;
  --theme-accent-error: #f87171;
  --theme-accent-info: #60a5fa;
  
  /* Shadow colors */
  --theme-shadow: rgba(0, 0, 0, 0.5);
  --theme-shadow-lg: rgba(0, 0, 0, 0.75);
  
  /* Interactive states */
  --theme-hover-bg: rgba(255, 255, 255, 0.05);
  --theme-active-bg: rgba(255, 255, 255, 0.1);
  --theme-focus-ring: #60a5fa;
}

/* Modern theme - Sleek blues and grays */
.theme-modern {
  /* Primary colors */
  --theme-primary: #0ea5e9;
  --theme-primary-hover: #0284c7;
  --theme-primary-light: #e0f2fe;
  --theme-primary-dark: #0c4a6e;
  
  /* Background colors */
  --theme-bg-primary: #f8fafc;
  --theme-bg-secondary: #f1f5f9;
  --theme-bg-tertiary: #e2e8f0;
  --theme-bg-quaternary: #cbd5e1;
  
  /* Text colors */
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #334155;
  --theme-text-tertiary: #64748b;
  --theme-text-quaternary: #94a3b8;
  
  /* Border colors */
  --theme-border-primary: #e2e8f0;
  --theme-border-secondary: #cbd5e1;
  --theme-border-tertiary: #94a3b8;
  
  /* Accent colors */
  --theme-accent-success: #059669;
  --theme-accent-warning: #d97706;
  --theme-accent-error: #dc2626;
  --theme-accent-info: #0ea5e9;
  
  /* Shadow colors */
  --theme-shadow: rgba(15, 23, 42, 0.1);
  --theme-shadow-lg: rgba(15, 23, 42, 0.25);
  
  /* Interactive states */
  --theme-hover-bg: rgba(15, 23, 42, 0.05);
  --theme-active-bg: rgba(15, 23, 42, 0.1);
  --theme-focus-ring: #0ea5e9;
}

/* Earth theme - Natural warm earth tones */
.theme-earth {
  /* Primary colors */
  --theme-primary: #8b4513;
  --theme-primary-hover: #a0522d;
  --theme-primary-light: #deb887;
  --theme-primary-dark: #654321;
  
  /* Background colors */
  --theme-bg-primary: #f5f5dc;
  --theme-bg-secondary: #f0e68c;
  --theme-bg-tertiary: #daa520;
  --theme-bg-quaternary: #cd853f;
  
  /* Text colors */
  --theme-text-primary: #2f1b14;
  --theme-text-secondary: #5d4e37;
  --theme-text-tertiary: #8b4513;
  --theme-text-quaternary: #a0522d;
  
  /* Border colors */
  --theme-border-primary: #deb887;
  --theme-border-secondary: #d2b48c;
  --theme-border-tertiary: #cd853f;
  
  /* Accent colors */
  --theme-accent-success: #228b22;
  --theme-accent-warning: #ff8c00;
  --theme-accent-error: #dc143c;
  --theme-accent-info: #4682b4;
  
  /* Shadow colors */
  --theme-shadow: rgba(139, 69, 19, 0.15);
  --theme-shadow-lg: rgba(139, 69, 19, 0.3);
  
  /* Interactive states */
  --theme-hover-bg: rgba(139, 69, 19, 0.08);
  --theme-active-bg: rgba(139, 69, 19, 0.15);
  --theme-focus-ring: #8b4513;
}

/* Glass theme - Translucent with subtle colors */
.theme-glass {
  /* Primary colors */
  --theme-primary: #8b5cf6;
  --theme-primary-hover: #7c3aed;
  --theme-primary-light: #f3e8ff;
  --theme-primary-dark: #581c87;
  
  /* Background colors */
  --theme-bg-primary: rgba(255, 255, 255, 0.95);
  --theme-bg-secondary: rgba(248, 250, 252, 0.9);
  --theme-bg-tertiary: rgba(241, 245, 249, 0.85);
  --theme-bg-quaternary: rgba(226, 232, 240, 0.8);
  
  /* Text colors */
  --theme-text-primary: #1e1b4b;
  --theme-text-secondary: #3730a3;
  --theme-text-tertiary: #6366f1;
  --theme-text-quaternary: #8b5cf6;
  
  /* Border colors */
  --theme-border-primary: rgba(226, 232, 240, 0.6);
  --theme-border-secondary: rgba(203, 213, 225, 0.7);
  --theme-border-tertiary: rgba(148, 163, 184, 0.8);
  
  /* Accent colors */
  --theme-accent-success: #10b981;
  --theme-accent-warning: #f59e0b;
  --theme-accent-error: #ef4444;
  --theme-accent-info: #8b5cf6;
  
  /* Shadow colors */
  --theme-shadow: rgba(139, 92, 246, 0.1);
  --theme-shadow-lg: rgba(139, 92, 246, 0.25);
  
  /* Interactive states */
  --theme-hover-bg: rgba(139, 92, 246, 0.05);
  --theme-active-bg: rgba(139, 92, 246, 0.1);
  --theme-focus-ring: #8b5cf6;
}

/* High Contrast theme - For accessibility */
.theme-high-contrast {
  /* Primary colors */
  --theme-primary: #000000;
  --theme-primary-hover: #333333;
  --theme-primary-light: #f0f0f0;
  --theme-primary-dark: #000000;
  
  /* Background colors */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f0f0f0;
  --theme-bg-tertiary: #e0e0e0;
  --theme-bg-quaternary: #d0d0d0;
  
  /* Text colors */
  --theme-text-primary: #000000;
  --theme-text-secondary: #000000;
  --theme-text-tertiary: #333333;
  --theme-text-quaternary: #666666;
  
  /* Border colors */
  --theme-border-primary: #000000;
  --theme-border-secondary: #333333;
  --theme-border-tertiary: #666666;
  
  /* Accent colors */
  --theme-accent-success: #008000;
  --theme-accent-warning: #ff8c00;
  --theme-accent-error: #ff0000;
  --theme-accent-info: #0000ff;
  
  /* Shadow colors */
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-shadow-lg: rgba(0, 0, 0, 0.6);
  
  /* Interactive states */
  --theme-hover-bg: rgba(0, 0, 0, 0.1);
  --theme-active-bg: rgba(0, 0, 0, 0.2);
  --theme-focus-ring: #000000;
}

/* Dark Blue theme - Deep blue with navy accents */
.theme-dark-blue {
  /* Primary colors */
  --theme-primary: #0099ff;
  --theme-primary-hover: #0077cc;
  --theme-primary-light: #33aaff;
  --theme-primary-dark: #0066cc;
  
  /* Background colors */
  --theme-bg-primary: #000033;
  --theme-bg-secondary: #000066;
  --theme-bg-tertiary: #000099;
  --theme-bg-quaternary: #0000cc;
  
  /* Text colors */
  --theme-text-primary: #e6f2ff;
  --theme-text-secondary: #ccddff;
  --theme-text-tertiary: #99bbff;
  --theme-text-quaternary: #6699ff;
  
  /* Border colors */
  --theme-border-primary: #003366;
  --theme-border-secondary: #004499;
  --theme-border-tertiary: #0066cc;
  
  /* Accent colors */
  --theme-accent-success: #00ff88;
  --theme-accent-warning: #ffaa00;
  --theme-accent-error: #ff3366;
  --theme-accent-info: #0099ff;
  
  /* Shadow colors */
  --theme-shadow: rgba(0, 0, 51, 0.7);
  --theme-shadow-lg: rgba(0, 0, 51, 0.9);
  
  /* Interactive states */
  --theme-hover-bg: rgba(0, 153, 255, 0.15);
  --theme-active-bg: rgba(0, 153, 255, 0.25);
  --theme-focus-ring: #0099ff;
}

/* Colorblind Friendly theme - High contrast colors safe for color vision deficiency */
.theme-colorblind-friendly {
  /* Primary colors */
  --theme-primary: #993366;
  --theme-primary-hover: #663344;
  --theme-primary-light: #cc6699;
  --theme-primary-dark: #661144;
  
  /* Background colors */
  --theme-bg-primary: #ffffcc;
  --theme-bg-secondary: #ffcc99;
  --theme-bg-tertiary: #ffaa88;
  --theme-bg-quaternary: #ff9966;
  
  /* Text colors */
  --theme-text-primary: #331122;
  --theme-text-secondary: #442233;
  --theme-text-tertiary: #553344;
  --theme-text-quaternary: #664455;
  
  /* Border colors */
  --theme-border-primary: #cc9966;
  --theme-border-secondary: #996633;
  --theme-border-tertiary: #663300;
  
  /* Accent colors */
  --theme-accent-success: #117733;
  --theme-accent-warning: #cc6633;
  --theme-accent-error: #882233;
  --theme-accent-info: #993366;
  
  /* Shadow colors */
  --theme-shadow: rgba(51, 17, 34, 0.15);
  --theme-shadow-lg: rgba(51, 17, 34, 0.3);
  
  /* Interactive states */
  --theme-hover-bg: rgba(153, 51, 102, 0.08);
  --theme-active-bg: rgba(153, 51, 102, 0.15);
  --theme-focus-ring: #993366;
}

/* Ocean theme - Bright tropical ocean with turquoise and coral accents */
.theme-ocean {
  /* Primary colors */
  --theme-primary: #0088cc;
  --theme-primary-hover: #006699;
  --theme-primary-light: #33aadd;
  --theme-primary-dark: #005588;
  
  /* Background colors */
  --theme-bg-primary: #cceeff;
  --theme-bg-secondary: #99ddff;
  --theme-bg-tertiary: #66ccff;
  --theme-bg-quaternary: #33bbff;
  
  /* Text colors */
  --theme-text-primary: #003344;
  --theme-text-secondary: #004455;
  --theme-text-tertiary: #005566;
  --theme-text-quaternary: #006677;
  
  /* Border colors */
  --theme-border-primary: #66bbdd;
  --theme-border-secondary: #4499cc;
  --theme-border-tertiary: #2288bb;
  
  /* Accent colors */
  --theme-accent-success: #00cc66;
  --theme-accent-warning: #ff9933;
  --theme-accent-error: #ff3333;
  --theme-accent-info: #0088cc;
  
  /* Shadow colors */
  --theme-shadow: rgba(0, 136, 204, 0.15);
  --theme-shadow-lg: rgba(0, 136, 204, 0.3);
  
  /* Interactive states */
  --theme-hover-bg: rgba(0, 136, 204, 0.08);
  --theme-active-bg: rgba(0, 136, 204, 0.15);
  --theme-focus-ring: #0088cc;
}

/* Utility classes for theme variables */
.theme-bg-primary { background-color: var(--theme-bg-primary); }
.theme-bg-secondary { background-color: var(--theme-bg-secondary); }
.theme-bg-tertiary { background-color: var(--theme-bg-tertiary); }
.theme-bg-quaternary { background-color: var(--theme-bg-quaternary); }

.theme-text-primary { color: var(--theme-text-primary); }
.theme-text-secondary { color: var(--theme-text-secondary); }
.theme-text-tertiary { color: var(--theme-text-tertiary); }
.theme-text-quaternary { color: var(--theme-text-quaternary); }

.theme-border-primary { border-color: var(--theme-border-primary); }
.theme-border-secondary { border-color: var(--theme-border-secondary); }
.theme-border-tertiary { border-color: var(--theme-border-tertiary); }

.theme-primary { color: var(--theme-primary); }
.theme-primary-bg { background-color: var(--theme-primary); }
.theme-primary-border { border-color: var(--theme-primary); }

.theme-accent-success { color: var(--theme-accent-success); }
.theme-accent-warning { color: var(--theme-accent-warning); }
.theme-accent-error { color: var(--theme-accent-error); }
.theme-accent-info { color: var(--theme-accent-info); }

.theme-shadow { box-shadow: 0 1px 3px var(--theme-shadow); }
.theme-shadow-lg { box-shadow: 0 10px 15px var(--theme-shadow-lg); }

.theme-transition { transition: var(--theme-transition); }
.theme-transition-fast { transition: var(--theme-transition-fast); }

/* Backdrop filter support for glass theme */
.theme-glass .backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Focus ring styles */
.theme-focus:focus {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

/* Interactive state styles */
.theme-hover:hover {
  background-color: var(--theme-hover-bg);
}

.theme-active:active {
  background-color: var(--theme-active-bg);
}