/* Interface Themes for Levi Games */
/* Each theme provides color variables that modals and menus will use */

/* Default Theme (Purple/Violet) */
:root, [data-theme="default"] {
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-accent: #8b5cf6;
    --theme-bg: #ffffff;
    --theme-text: #333333;
    --theme-text-light: #666666;
    --theme-border: #dddddd;
    --theme-hover: rgba(102, 126, 234, 0.1);
}

/* Nord Theme - Cool arctic colors */
[data-theme="nord"] {
    --theme-primary: #88c0d0;
    --theme-secondary: #5e81ac;
    --theme-accent: #81a1c1;
    --theme-bg: #eceff4;
    --theme-text: #2e3440;
    --theme-text-light: #4c566a;
    --theme-border: #d8dee9;
    --theme-hover: rgba(136, 192, 208, 0.15);
}

/* Midnight Theme - Dark evening colors */
[data-theme="midnight"] {
    --theme-primary: #4a5568;
    --theme-secondary: #2d3748;
    --theme-accent: #718096;
    --theme-bg: #1a202c;
    --theme-text: #e2e8f0;
    --theme-text-light: #a0aec0;
    --theme-border: #4a5568;
    --theme-hover: rgba(113, 128, 150, 0.2);
}

/* Solarized Theme - Eye-friendly colors */
[data-theme="solarized"] {
    --theme-primary: #268bd2;
    --theme-secondary: #2aa198;
    --theme-accent: #859900;
    --theme-bg: #fdf6e3;
    --theme-text: #657b83;
    --theme-text-light: #93a1a1;
    --theme-border: #eee8d5;
    --theme-hover: rgba(38, 139, 210, 0.1);
}

/* Gruvbox Theme - Retro warm colors */
[data-theme="gruvbox"] {
    --theme-primary: #fe8019;
    --theme-secondary: #d65d0e;
    --theme-accent: #fabd2f;
    --theme-bg: #fbf1c7;
    --theme-text: #3c3836;
    --theme-text-light: #665c54;
    --theme-border: #ebdbb2;
    --theme-hover: rgba(254, 128, 25, 0.15);
}

/* Monokai Theme - Classic coding theme */
[data-theme="monokai"] {
    --theme-primary: #66d9ef;
    --theme-secondary: #a6e22e;
    --theme-accent: #f92672;
    --theme-bg: #272822;
    --theme-text: #f8f8f2;
    --theme-text-light: #75715e;
    --theme-border: #49483e;
    --theme-hover: rgba(102, 217, 239, 0.2);
}

/* Cyberpunk Theme - Neon future vibes */
[data-theme="cyberpunk"] {
    --theme-primary: #ff00ff;
    --theme-secondary: #00ffff;
    --theme-accent: #ffff00;
    --theme-bg: #0a0a0a;
    --theme-text: #ffffff;
    --theme-text-light: #cccccc;
    --theme-border: #ff00ff;
    --theme-hover: rgba(255, 0, 255, 0.2);
}

/* Retro Wave Theme - 80s aesthetic */
[data-theme="retro"] {
    --theme-primary: #ff6ec7;
    --theme-secondary: #fe4164;
    --theme-accent: #39d353;
    --theme-bg: #2a1a4a;
    --theme-text: #ffffff;
    --theme-text-light: #e0b0ff;
    --theme-border: #ff6ec7;
    --theme-hover: rgba(255, 110, 199, 0.2);
}

/* Matrix Theme - Green code rain */
[data-theme="matrix"] {
    --theme-primary: #00ff00;
    --theme-secondary: #00dd00;
    --theme-accent: #00aa00;
    --theme-bg: #000000;
    --theme-text: #00ff00;
    --theme-text-light: #008800;
    --theme-border: #003300;
    --theme-hover: rgba(0, 255, 0, 0.15);
}

/* Apply theme colors to modal headers */
.modal-overlay .customize-header,
.modal-overlay .shop-header,
.modal-overlay [style*="background: linear-gradient(135deg, #667eea"] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Apply theme colors to modal containers */
.modal-overlay .customize-container,
.modal-overlay .shop-container {
    background: var(--theme-bg) !important;
}

/* Apply theme colors to text */
.modal-overlay .customize-container h2,
.modal-overlay .customize-container h3,
.modal-overlay .shop-container h2,
.modal-overlay .shop-container h3 {
    color: var(--theme-text) !important;
}

/* Apply theme colors to buttons */
.modal-overlay button[style*="background: #667eea"],
.shop-category-btn.active {
    background: var(--theme-primary) !important;
}

.modal-overlay button[style*="background: white"]:not(.active),
.shop-category-btn:not(.active) {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    border: 2px solid var(--theme-border) !important;
}

/* Apply theme to borders and dividers */
.modal-overlay [style*="border:"],
.modal-overlay [style*="border-bottom:"] {
    border-color: var(--theme-border) !important;
}