/**
 * Theme System - Color variables and theme switching
 * Defines all color themes and their variations
 */

/* Default Purple Theme */
:root,
:root[data-color="purple"] {
  --primary: rgb(147, 51, 234);
  --primary-rgb: 147, 51, 234;
  --primary-50: rgb(250, 245, 255);
  --primary-100: rgb(243, 232, 255);
  --primary-200: rgb(233, 213, 255);
  --primary-300: rgb(196, 181, 253);
  --primary-400: rgb(167, 139, 250);
  --primary-500: rgb(139, 92, 246);
  --primary-600: rgb(124, 58, 237);
  --primary-700: rgb(109, 40, 217);
  --primary-800: rgb(91, 33, 182);
  --primary-900: rgb(76, 29, 149);
  
  --secondary: rgb(168, 85, 247);
  --secondary-rgb: 168, 85, 247;
  --accent: rgb(196, 181, 253);
  --accent-rgb: 196, 181, 253;
}

/* Blue Theme */
:root[data-color="blue"] {
  --primary: rgb(59, 130, 246);
  --primary-rgb: 59, 130, 246;
  --primary-50: rgb(239, 246, 255);
  --primary-100: rgb(219, 234, 254);
  --primary-200: rgb(191, 219, 254);
  --primary-300: rgb(147, 197, 253);
  --primary-400: rgb(96, 165, 250);
  --primary-500: rgb(59, 130, 246);
  --primary-600: rgb(37, 99, 235);
  --primary-700: rgb(29, 78, 216);
  --primary-800: rgb(30, 64, 175);
  --primary-900: rgb(30, 58, 138);
  
  --secondary: rgb(96, 165, 250);
  --secondary-rgb: 96, 165, 250;
  --accent: rgb(147, 197, 253);
  --accent-rgb: 147, 197, 253;
}

/* Green Theme */
:root[data-color="green"] {
  --primary: rgb(34, 197, 94);
  --primary-rgb: 34, 197, 94;
  --primary-50: rgb(240, 253, 244);
  --primary-100: rgb(220, 252, 231);
  --primary-200: rgb(187, 247, 208);
  --primary-300: rgb(134, 239, 172);
  --primary-400: rgb(74, 222, 128);
  --primary-500: rgb(34, 197, 94);
  --primary-600: rgb(22, 163, 74);
  --primary-700: rgb(21, 128, 61);
  --primary-800: rgb(22, 101, 52);
  --primary-900: rgb(20, 83, 45);
  
  --secondary: rgb(74, 222, 128);
  --secondary-rgb: 74, 222, 128;
  --accent: rgb(134, 239, 172);
  --accent-rgb: 134, 239, 172;
}

/* Red Theme */
:root[data-color="red"] {
  --primary: rgb(239, 68, 68);
  --primary-rgb: 239, 68, 68;
  --primary-50: rgb(254, 242, 242);
  --primary-100: rgb(254, 226, 226);
  --primary-200: rgb(254, 202, 202);
  --primary-300: rgb(252, 165, 165);
  --primary-400: rgb(248, 113, 113);
  --primary-500: rgb(239, 68, 68);
  --primary-600: rgb(220, 38, 38);
  --primary-700: rgb(185, 28, 28);
  --primary-800: rgb(153, 27, 27);
  --primary-900: rgb(127, 29, 29);
  
  --secondary: rgb(248, 113, 113);
  --secondary-rgb: 248, 113, 113;
  --accent: rgb(252, 165, 165);
  --accent-rgb: 252, 165, 165;
}

/* Orange Theme */
:root[data-color="orange"] {
  --primary: rgb(249, 115, 22);
  --primary-rgb: 249, 115, 22;
  --primary-50: rgb(255, 247, 237);
  --primary-100: rgb(255, 237, 213);
  --primary-200: rgb(254, 215, 170);
  --primary-300: rgb(253, 186, 116);
  --primary-400: rgb(251, 146, 60);
  --primary-500: rgb(249, 115, 22);
  --primary-600: rgb(234, 88, 12);
  --primary-700: rgb(194, 65, 12);
  --primary-800: rgb(154, 52, 18);
  --primary-900: rgb(124, 45, 18);
  
  --secondary: rgb(251, 146, 60);
  --secondary-rgb: 251, 146, 60;
  --accent: rgb(253, 186, 116);
  --accent-rgb: 253, 186, 116;
}

/* Teal Theme */
:root[data-color="teal"] {
  --primary: rgb(20, 184, 166);
  --primary-rgb: 20, 184, 166;
  --primary-50: rgb(240, 253, 250);
  --primary-100: rgb(204, 251, 241);
  --primary-200: rgb(153, 246, 228);
  --primary-300: rgb(94, 234, 212);
  --primary-400: rgb(45, 212, 191);
  --primary-500: rgb(20, 184, 166);
  --primary-600: rgb(13, 148, 136);
  --primary-700: rgb(15, 118, 110);
  --primary-800: rgb(17, 94, 89);
  --primary-900: rgb(19, 78, 74);
  
  --secondary: rgb(45, 212, 191);
  --secondary-rgb: 45, 212, 191;
  --accent: rgb(94, 234, 212);
  --accent-rgb: 94, 234, 212;
}

/* Pink Theme */
:root[data-color="pink"] {
  --primary: rgb(236, 72, 153);
  --primary-rgb: 236, 72, 153;
  --primary-50: rgb(253, 242, 248);
  --primary-100: rgb(252, 231, 243);
  --primary-200: rgb(251, 207, 232);
  --primary-300: rgb(249, 168, 212);
  --primary-400: rgb(244, 114, 182);
  --primary-500: rgb(236, 72, 153);
  --primary-600: rgb(219, 39, 119);
  --primary-700: rgb(190, 24, 93);
  --primary-800: rgb(157, 23, 77);
  --primary-900: rgb(131, 24, 67);
  
  --secondary: rgb(244, 114, 182);
  --secondary-rgb: 244, 114, 182;
  --accent: rgb(249, 168, 212);
  --accent-rgb: 249, 168, 212;
}

/* Gold/Yellow Theme */
:root[data-color="gold"] {
  --primary: rgb(245, 158, 11);
  --primary-rgb: 245, 158, 11;
  --primary-50: rgb(255, 251, 235);
  --primary-100: rgb(254, 243, 199);
  --primary-200: rgb(253, 230, 138);
  --primary-300: rgb(252, 211, 77);
  --primary-400: rgb(251, 191, 36);
  --primary-500: rgb(245, 158, 11);
  --primary-600: rgb(217, 119, 6);
  --primary-700: rgb(180, 83, 9);
  --primary-800: rgb(146, 64, 14);
  --primary-900: rgb(120, 53, 15);
  
  --secondary: rgb(251, 191, 36);
  --secondary-rgb: 251, 191, 36;
  --accent: rgb(252, 211, 77);
  --accent-rgb: 252, 211, 77;
}

/* Dark/Monochrome Theme */
:root[data-color="dark"] {
  --primary: rgb(107, 114, 128);
  --primary-rgb: 107, 114, 128;
  --primary-50: rgb(249, 250, 251);
  --primary-100: rgb(243, 244, 246);
  --primary-200: rgb(229, 231, 235);
  --primary-300: rgb(209, 213, 219);
  --primary-400: rgb(156, 163, 175);
  --primary-500: rgb(107, 114, 128);
  --primary-600: rgb(75, 85, 99);
  --primary-700: rgb(55, 65, 81);
  --primary-800: rgb(31, 41, 55);
  --primary-900: rgb(17, 24, 39);
  
  --secondary: rgb(156, 163, 175);
  --secondary-rgb: 156, 163, 175;
  --accent: rgb(209, 213, 219);
  --accent-rgb: 209, 213, 219;
}

/* Color Intensity Variants */
:root[data-intensity="1"] {
  --primary: var(--primary-400);
  --secondary: var(--primary-300);
  --accent: var(--primary-200);
}

:root[data-intensity="2"] {
  /* Default intensity - uses base colors defined above */
  --primary: var(--primary-500, var(--primary));
  --secondary: var(--primary-400, var(--secondary));
  --accent: var(--primary-300, var(--accent));
}

:root[data-intensity="3"] {
  --primary: var(--primary-600);
  --secondary: var(--primary-700);
  --accent: var(--primary-500);
}

/* Gradient Utilities */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--secondary), var(--accent));
}

.text-gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Theme-aware Colors */
.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-accent {
  color: var(--accent);
}

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

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

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

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

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

.border-accent {
  border-color: var(--accent);
}

/* Hover States */
.hover\:text-primary:hover {
  color: var(--primary);
}

.hover\:bg-primary:hover {
  background-color: var(--primary);
}

.hover\:border-primary:hover {
  border-color: var(--primary);
}

/* Focus States */
.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary), 0.3);
}

/* Theme Transition */
* {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* Dark Mode Adjustments */
.dark {
  --primary-50: var(--primary-900);
  --primary-100: var(--primary-800);
  --primary-200: var(--primary-700);
  --primary-300: var(--primary-600);
  --primary-400: var(--primary-500);
  --primary-600: var(--primary-400);
  --primary-700: var(--primary-300);
  --primary-800: var(--primary-200);
  --primary-900: var(--primary-50);
}