/* Theme System - Dynamic color schemes */

/* FIFA Theme (Default - Yellow/Gold accent) */
[data-theme="fifa"] {
  --theme-primary: oklch(79.5% 0.184 86.047); /* yellow-500 */
  --theme-primary-dark: oklch(68.1% 0.162 75.834); /* yellow-600 */
  --theme-primary-light: oklch(85.2% 0.199 91.936); /* yellow-400 */
  --theme-primary-very-light: oklch(90.1% 0.182 95.759); /* yellow-300 */
  --theme-primary-very-dark: oklch(55.4% 0.135 66.442); /* yellow-700 */
  --theme-accent: oklch(79.5% 0.184 86.047); /* yellow-500 */
  --theme-bg-gradient-from: oklch(27.8% 0.033 256.848); /* gray-800 */
  --theme-bg-gradient-to: oklch(21% 0.034 264.665); /* gray-900 */
}

/* Blue Ocean Theme */
[data-theme="blue_ocean"] {
  --theme-primary: oklch(62.3% 0.214 259.815); /* blue-500 */
  --theme-primary-dark: oklch(54.6% 0.245 262.881); /* blue-600 */
  --theme-primary-light: oklch(70.7% 0.165 254.624); /* blue-400 */
  --theme-primary-very-light: oklch(78.5% 0.138 249.5); /* blue-300 */
  --theme-primary-very-dark: oklch(48.8% 0.243 264.376); /* blue-700 */
  --theme-accent: oklch(62.3% 0.214 259.815); /* blue-500 */
  --theme-bg-gradient-from: oklch(23% 0.04 260); /* dark blue */
  --theme-bg-gradient-to: oklch(16% 0.035 265); /* darker blue */
}

/* Purple Night Theme */
[data-theme="purple_night"] {
  --theme-primary: oklch(62.7% 0.265 303.9); /* purple-500 */
  --theme-primary-dark: oklch(55.8% 0.288 302.321); /* purple-600 */
  --theme-primary-light: oklch(71.4% 0.203 305.504); /* purple-400 */
  --theme-primary-very-light: oklch(78.6% 0.161 308.5); /* purple-300 */
  --theme-primary-very-dark: oklch(49.6% 0.265 301.924); /* purple-700 */
  --theme-accent: oklch(62.7% 0.265 303.9); /* purple-500 */
  --theme-bg-gradient-from: oklch(24% 0.06 305); /* dark purple */
  --theme-bg-gradient-to: oklch(17% 0.05 310); /* darker purple */
}

/* Forest Green Theme */
[data-theme="forest_green"] {
  --theme-primary: oklch(72.3% 0.219 149.579); /* green-500 */
  --theme-primary-dark: oklch(62.7% 0.194 149.214); /* green-600 */
  --theme-primary-light: oklch(79.2% 0.209 151.711); /* green-400 */
  --theme-primary-very-light: oklch(84.5% 0.178 155); /* green-300 */
  --theme-primary-very-dark: oklch(52.7% 0.174 150.069); /* green-700 */
  --theme-accent: oklch(72.3% 0.219 149.579); /* green-500 */
  --theme-bg-gradient-from: oklch(22% 0.045 150); /* dark green */
  --theme-bg-gradient-to: oklch(15% 0.04 155); /* darker green */
}

/* Sunset Orange Theme */
[data-theme="sunset_orange"] {
  --theme-primary: oklch(70.5% 0.213 47.604); /* orange-500 */
  --theme-primary-dark: oklch(64.6% 0.222 41.116); /* orange-600 */
  --theme-primary-light: oklch(75% 0.183 55.934); /* orange-400 */
  --theme-primary-very-light: oklch(80% 0.155 60); /* orange-300 */
  --theme-primary-very-dark: oklch(55% 0.215 38); /* orange-700 */
  --theme-accent: oklch(70.5% 0.213 47.604); /* orange-500 */
  --theme-bg-gradient-from: oklch(26% 0.055 45); /* dark orange */
  --theme-bg-gradient-to: oklch(19% 0.045 40); /* darker orange */
}

/* ===== Utility Classes ===== */

/* Text colors */
.text-primary { color: var(--theme-primary); }
.text-primary-dark { color: var(--theme-primary-dark); }
.text-primary-light { color: var(--theme-primary-light); }

/* Background colors */
.bg-primary { background-color: var(--theme-primary); }
.bg-primary-dark { background-color: var(--theme-primary-dark); }
.bg-primary-light { background-color: var(--theme-primary-light); }
.bg-primary\/10 { background-color: color-mix(in oklch, var(--theme-primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklch, var(--theme-primary) 20%, transparent); }

/* Border colors */
.border-primary { border-color: var(--theme-primary); }
.border-primary-dark { border-color: var(--theme-primary-dark); }
.border-primary-light { border-color: var(--theme-primary-light); }
.border-primary\/30 { border-color: color-mix(in oklch, var(--theme-primary) 30%, transparent); }
.border-primary\/50 { border-color: color-mix(in oklch, var(--theme-primary) 50%, transparent); }

/* Gradient stops */
.from-primary {
  --tw-gradient-from: var(--theme-primary);
  --tw-gradient-to: rgb(from var(--theme-primary) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-dark {
  --tw-gradient-from: var(--theme-primary-dark);
  --tw-gradient-to: rgb(from var(--theme-primary-dark) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-light {
  --tw-gradient-from: var(--theme-primary-light);
  --tw-gradient-to: rgb(from var(--theme-primary-light) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary-very-light {
  --tw-gradient-from: var(--theme-primary-very-light);
  --tw-gradient-to: rgb(from var(--theme-primary-very-light) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary { --tw-gradient-to: var(--theme-primary); }
.to-primary-dark { --tw-gradient-to: var(--theme-primary-dark); }
.to-primary-light { --tw-gradient-to: var(--theme-primary-light); }
.to-primary-very-dark { --tw-gradient-to: var(--theme-primary-very-dark); }
.via-primary { --tw-gradient-via: var(--theme-primary); }

/* Hover states */
.hover\:text-primary:hover { color: var(--theme-primary); }
.hover\:text-primary-light:hover { color: var(--theme-primary-light); }
.hover\:bg-primary:hover { background-color: var(--theme-primary); }
.hover\:bg-primary-light:hover { background-color: var(--theme-primary-light); }
.hover\:bg-primary-dark:hover { background-color: var(--theme-primary-dark); }
.hover\:border-primary:hover { border-color: var(--theme-primary); }
.hover\:border-primary\/50:hover { border-color: color-mix(in oklch, var(--theme-primary) 50%, transparent); }
.hover\:from-primary:hover {
  --tw-gradient-from: var(--theme-primary);
  --tw-gradient-to: rgb(from var(--theme-primary) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-primary-light:hover {
  --tw-gradient-from: var(--theme-primary-light);
  --tw-gradient-to: rgb(from var(--theme-primary-light) r g b / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-primary-light:hover { --tw-gradient-to: var(--theme-primary-light); }
.hover\:file\:bg-primary:hover::file-selector-button { background-color: var(--theme-primary); }

/* Focus states */
.focus\:border-primary:focus { border-color: var(--theme-primary); }
.focus\:ring-primary:focus { --tw-ring-color: var(--theme-primary); }

/* Shadow with theme color */
.shadow-primary\/20 { --tw-shadow-color: color-mix(in oklch, var(--theme-primary) 20%, transparent); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color); }
.shadow-primary-glow { box-shadow: 0 0 15px color-mix(in oklch, var(--theme-primary) 50%, transparent); }
.shadow-primary-glow-sm { box-shadow: 0 0 15px color-mix(in oklch, var(--theme-primary) 15%, transparent); }
.shadow-primary-glow-subtle { box-shadow: 0 0 20px color-mix(in oklch, var(--theme-primary) 20%, transparent); }

/* File input buttons */
.file\:bg-primary::file-selector-button { background-color: var(--theme-primary); }
.file\:bg-primary-dark::file-selector-button { background-color: var(--theme-primary-dark); }

/* Accent color (for checkboxes, range inputs) */
.accent-primary { accent-color: var(--theme-primary); }

/* Themed background gradients */
.bg-theme-gradient {
  background: linear-gradient(135deg, var(--theme-bg-gradient-from), var(--theme-bg-gradient-to));
}