/**
 * THEME.CSS - Variables y Colores
 * Ajedrez de Silicio - Sistema Chessground + Chessops
 * 
 * Sistema de Temas Globales: Dark Matrix, Light Matrix, Quantum Matrix
 */

/* ===== VARIABLES BASE (comunes a todos los temas) ===== */
:root {
    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Bordes */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-theme: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fuentes */
    --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', monospace;
}

/* ===== TEMA: DARK MATRIX (por defecto) ===== */
:root,
[data-theme="dark-matrix"] {
    /* Fondos */
    --theme-bg-primary: #0d0d0d;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-tertiary: #2a2a2a;
    
    /* Colores principales (compatibilidad con código existente) */
    --color-primary: #d4af37;
    --color-primary-light: #ffd700;
    --color-primary-dark: #c49d2e;
    --color-bg-dark: #0d0d0d;
    --color-bg-medium: #1a1a1a;
    --color-bg-light: #2a2a2a;
    
    /* Acentos */
    --theme-accent-primary: #d4af37;
    --theme-accent-secondary: #ff3333;
    --color-accent: #ff3333;
    --color-accent-light: #ff6666;
    
    /* Textos */
    --theme-text-primary: #d4af37;
    --theme-text-secondary: #ffffff;
    --theme-text-muted: #999999;
    --color-text-primary: #d4af37;
    --color-text-secondary: #999;
    --color-text-muted: #666;
    --color-text-white: #ffffff;
    
    /* Estados */
    --color-success: #4caf50;
    --color-error: #ff3333;
    --color-warning: #ff9800;
    --color-info: #2196f3;
    
    /* Componentes */
    --theme-border: rgba(212, 175, 55, 0.25);
    --theme-button-bg: linear-gradient(145deg, #1f1f1f 0%, #171717 100%);
    --theme-button-hover: linear-gradient(145deg, #C50039 0%, #8B0028 100%);
    --theme-button-text: #e8e8e8;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
    --theme-input-bg: rgba(0, 0, 0, 0.35);
    --theme-input-border: rgba(212, 175, 55, 0.3);
    --theme-input-placeholder: #999999;
    --theme-coords-color: #D4AF37;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.3);
    --theme-shadow: rgba(0, 0, 0, 0.4);
    --theme-shadow-glow: rgba(212, 175, 55, 0.3);
}

/* ===== TEMA: LIGHT MATRIX ===== */
[data-theme="light-matrix"] {
    /* Fondos */
    --theme-bg-primary: #f8f9fa;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #e9ecef;
    
    /* Colores principales - Celeste suavizado */
    --color-primary: #64B5F6;
    --color-primary-light: #90CAF9;
    --color-primary-dark: #42A5F5;
    --color-bg-dark: #f8f9fa;
    --color-bg-medium: #ffffff;
    --color-bg-light: #e9ecef;
    
    /* Acentos - Tonos más suaves y elegantes */
    --theme-accent-primary: #64B5F6;
    --theme-accent-secondary: #81C784;
    --color-accent: #81C784;
    --color-accent-light: #A5D6A7;
    
    /* Textos */
    --theme-text-primary: #2c3e50;
    --theme-text-secondary: #495057;
    --theme-text-muted: #6c757d;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    --color-text-white: #2c3e50;
    
    /* Estados */
    --color-success: #66BB6A;
    --color-error: #EF5350;
    --color-warning: #FFA726;
    --color-info: #64B5F6;
    
    /* Componentes - Bordes y efectos más sutiles */
    --theme-border: rgba(100, 181, 246, 0.25);
    --theme-button-bg: linear-gradient(145deg, #f1f3f5 0%, #e9ecef 100%);
    --theme-button-hover: linear-gradient(145deg, #64B5F6 0%, #42A5F5 100%);
    --theme-button-text: #2c3e50;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --theme-input-bg: rgba(255, 255, 255, 0.95);
    --theme-input-border: rgba(100, 181, 246, 0.3);
    --theme-input-placeholder: #6c757d;
    --theme-coords-color: #495057;
    --theme-coords-text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
    
    /* Sombras - Más sutiles y elegantes */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 15px rgba(100, 181, 246, 0.2);
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-shadow-glow: rgba(100, 181, 246, 0.2);
}

/* ===== TEMA: QUANTUM MATRIX ===== */
[data-theme="quantum-matrix"] {
    /* Fondos */
    --theme-bg-primary: #0a0a0a;
    --theme-bg-secondary: #1a0a2e;
    --theme-bg-tertiary: #16213e;
    
    /* Colores principales */
    --color-primary: #00f5ff;
    --color-primary-light: #33f7ff;
    --color-primary-dark: #00c4cc;
    --color-bg-dark: #0a0a0a;
    --color-bg-medium: #1a0a2e;
    --color-bg-light: #16213e;
    
    /* Acentos */
    --theme-accent-primary: #00f5ff;
    --theme-accent-secondary: #ff00ff;
    --color-accent: #ff00ff;
    --color-accent-light: #ff33ff;
    
    /* Textos */
    --theme-text-primary: #00f5ff;
    --theme-text-secondary: #ffffff;
    --theme-text-muted: #ff00ff;
    --color-text-primary: #00f5ff;
    --color-text-secondary: #ffffff;
    --color-text-muted: #ff00ff;
    --color-text-white: #ffffff;
    
    /* Estados */
    --color-success: #00ff00;
    --color-error: #ff0066;
    --color-warning: #ffff00;
    --color-info: #00f5ff;
    
    /* Componentes */
    --theme-border: rgba(0, 245, 255, 0.4);
    --theme-button-bg: linear-gradient(145deg, #1a0a2e 0%, #0a0a0a 100%);
    --theme-button-hover: linear-gradient(145deg, #ff00ff 0%, #00f5ff 100%);
    --theme-button-text: #00f5ff;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #1a0a2e 0%, #16213e 100%);
    --theme-input-bg: rgba(22, 33, 62, 0.6);
    --theme-input-border: rgba(0, 245, 255, 0.5);
    --theme-input-placeholder: #999999;
    --theme-coords-color: #00f5ff;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 245, 255, 0.5);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 245, 255, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 245, 255, 0.4);
    --shadow-lg: 0 8px 24px rgba(255, 0, 255, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.6);
    --theme-shadow: rgba(0, 245, 255, 0.4);
    --theme-shadow-glow: rgba(0, 245, 255, 0.6);
}

/* ===== TEMA: AURUM MATRIX ===== */
[data-theme="aurum-matrix"] {
    /* Fondos */
    --theme-bg-primary: #2A1F0F;
    --theme-bg-secondary: #1A1509;
    --theme-bg-tertiary: #3D2E1A;
    
    /* Colores principales */
    --color-primary: #F6E7CB;
    --color-primary-light: #FFF4E0;
    --color-primary-dark: #E8D4A8;
    --color-bg-dark: #2A1F0F;
    --color-bg-medium: #1A1509;
    --color-bg-light: #3D2E1A;
    
    /* Acentos */
    --theme-accent-primary: #F6E7CB;
    --theme-accent-secondary: #D4B87A;
    --color-accent: #D4B87A;
    --color-accent-light: #E8D4A8;
    
    /* Textos */
    --theme-text-primary: #F6E7CB;
    --theme-text-secondary: #E8D4A8;
    --theme-text-muted: #A6895D;
    --color-text-primary: #F6E7CB;
    --color-text-secondary: #E8D4A8;
    --color-text-muted: #A6895D;
    --color-text-white: #F6E7CB;
    
    /* Estados */
    --color-success: #8B9A5B;
    --color-error: #C97D60;
    --color-warning: #D4B87A;
    --color-info: #A6895D;
    
    /* Componentes */
    --theme-border: rgba(246, 231, 203, 0.4);
    --theme-button-bg: linear-gradient(145deg, #3D2E1A 0%, #2A1F0F 100%);
    --theme-button-hover: linear-gradient(145deg, #D4B87A 0%, #A6895D 100%);
    --theme-button-text: #F6E7CB;
    --theme-button-text-hover: #1A1509;
    --theme-modal-bg: linear-gradient(135deg, #2A1F0F 0%, #1A1509 100%);
    --theme-input-bg: rgba(61, 46, 26, 0.6);
    --theme-input-border: rgba(246, 231, 203, 0.5);
    --theme-input-placeholder: #A6895D;
    --theme-coords-color: #F6E7CB;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(246, 231, 203, 0.3);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(92, 58, 20, 0.4);
    --shadow-md: 0 4px 12px rgba(92, 58, 20, 0.5);
    --shadow-lg: 0 8px 24px rgba(92, 58, 20, 0.6);
    --shadow-glow: 0 0 20px rgba(246, 231, 203, 0.4);
    --theme-shadow: rgba(92, 58, 20, 0.5);
    --theme-shadow-glow: rgba(246, 231, 203, 0.4);
}

/* ===== TEMA: ROSE MATRIX ===== */
[data-theme="rose-matrix"] {
    /* Fondos - Oscuros con toques rosas */
    --theme-bg-primary: #1a0a1a;
    --theme-bg-secondary: #2a0a2a;
    --theme-bg-tertiary: #3a1a3a;
    
    /* Colores principales - Rosas vibrantes neón */
    --color-primary: #FF1493; /* Deep Pink */
    --color-primary-light: #FF69B4; /* Hot Pink */
    --color-primary-dark: #DC143C; /* Crimson */
    --color-bg-dark: #1a0a1a;
    --color-bg-medium: #2a0a2a;
    --color-bg-light: #3a1a3a;
    
    /* Acentos */
    --theme-accent-primary: #FF1493;
    --theme-accent-secondary: #FF10F0; /* Magenta neón */
    --color-accent: #FF10F0;
    --color-accent-light: #FF69B4;
    
    /* Textos */
    --theme-text-primary: #FF69B4;
    --theme-text-secondary: #ffffff;
    --theme-text-muted: #FFB6C1; /* Light Pink */
    --color-text-primary: #FF69B4;
    --color-text-secondary: #ffffff;
    --color-text-muted: #FFB6C1;
    --color-text-white: #ffffff;
    
    /* Estados */
    --color-success: #00FF7F; /* Spring Green */
    --color-error: #FF1493;
    --color-warning: #FFD700; /* Gold */
    --color-info: #FF10F0;
    
    /* Componentes */
    --theme-border: rgba(255, 20, 147, 0.4);
    --theme-button-bg: linear-gradient(145deg, #2a0a2a 0%, #1a0a1a 100%);
    --theme-button-hover: linear-gradient(145deg, #FF1493 0%, #DC143C 100%);
    --theme-button-text: #FF69B4;
    --theme-button-text-hover: #ffffff;
    --theme-modal-bg: linear-gradient(135deg, #1a0a1a 0%, #2a0a2a 100%);
    --theme-input-bg: rgba(58, 26, 58, 0.6);
    --theme-input-border: rgba(255, 20, 147, 0.5);
    --theme-input-placeholder: #FFB6C1;
    --theme-coords-color: #FF69B4;
    --theme-coords-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 20, 147, 0.5);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(255, 20, 147, 0.3);
    --shadow-md: 0 4px 12px rgba(255, 20, 147, 0.4);
    --shadow-lg: 0 8px 24px rgba(255, 16, 240, 0.5);
    --shadow-glow: 0 0 20px rgba(255, 20, 147, 0.6);
    --theme-shadow: rgba(255, 20, 147, 0.4);
    --theme-shadow-glow: rgba(255, 20, 147, 0.6);
}

/* ===== TEMA: FALLING CODE MATRIX ===== */
[data-theme="falling-code-matrix"] {
    /* Fondos - Negro profundo como Matrix */
    --theme-bg-primary: #000000;
    --theme-bg-secondary: #0a0a0a;
    --theme-bg-tertiary: #1a1a1a;
    
    /* Colores principales - Verde neón icónico de Matrix */
    --color-primary: #00FF41; /* Verde Matrix brillante */
    --color-primary-light: #39FF14; /* Verde neón más claro */
    --color-primary-dark: #00CC33; /* Verde más oscuro */
    --color-bg-dark: #000000;
    --color-bg-medium: #0a0a0a;
    --color-bg-light: #1a1a1a;
    
    /* Acentos */
    --theme-accent-primary: #00FF41;
    --theme-accent-secondary: #00FF00; /* Verde puro */
    --color-accent: #00FF00;
    --color-accent-light: #39FF14;
    
    /* Textos */
    --theme-text-primary: #00FF41;
    --theme-text-secondary: #00FF00;
    --theme-text-muted: #00CC33;
    --color-text-primary: #00FF41;
    --color-text-secondary: #00FF00;
    --color-text-muted: #00CC33;
    --color-text-white: #00FF41;
    
    /* Estados */
    --color-success: #00FF41;
    --color-error: #FF0040; /* Rojo neón para contraste */
    --color-warning: #FFAA00; /* Naranja neón */
    --color-info: #00FFFF; /* Cian neón */
    
    /* Componentes */
    --theme-border: rgba(0, 255, 65, 0.4);
    --theme-button-bg: linear-gradient(145deg, #0a0a0a 0%, #000000 100%);
    --theme-button-hover: linear-gradient(145deg, #00FF41 0%, #00CC33 100%);
    --theme-button-text: #00FF41;
    --theme-button-text-hover: #000000;
    --theme-modal-bg: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
    --theme-input-bg: rgba(26, 26, 26, 0.8);
    --theme-input-border: rgba(0, 255, 65, 0.5);
    --theme-input-placeholder: #00CC33;
    --theme-coords-color: #00FF41;
    --theme-coords-text-shadow: 0 0 10px rgba(0, 255, 65, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.8);
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 255, 65, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 255, 65, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 255, 65, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 255, 65, 0.6);
    --theme-shadow: rgba(0, 255, 65, 0.4);
    --theme-shadow-glow: rgba(0, 255, 65, 0.6);
}

/* ===== EFECTO DE CÓDIGO CAYENDO (MATRIX RAIN) ===== */
/* Aplicar solo cuando el tema Falling Code Matrix está activo */
html[data-theme="falling-code-matrix"] body,
body[data-theme="falling-code-matrix"] {
    position: relative;
    overflow: hidden;
}

/* Overlay con código cayendo usando pseudo-elemento */
html[data-theme="falling-code-matrix"] body::before,
body[data-theme="falling-code-matrix"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 65, 0.12) 2px,
            rgba(0, 255, 65, 0.12) 4px
        );
    pointer-events: none;
    z-index: 0;
    animation: matrixRain 12s linear infinite;
    opacity: 0.6;
}

/* Animación de caída */
@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Efecto adicional: columnas de código cayendo */
html[data-theme="falling-code-matrix"] body::after,
body[data-theme="falling-code-matrix"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(2.5ch - 1px),
            rgba(0, 255, 65, 0.15) calc(2.5ch - 1px),
            rgba(0, 255, 65, 0.15) 2.5ch
        );
    pointer-events: none;
    z-index: 0;
    animation: matrixColumns 18s linear infinite;
    opacity: 0.5;
}

@keyframes matrixColumns {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(3ch);
    }
}

/* Asegurar que el contenido esté por encima del efecto */
html[data-theme="falling-code-matrix"] .chess-layout,
html[data-theme="falling-code-matrix"] .confirm-modal,
html[data-theme="falling-code-matrix"] .game-selection-overlay,
body[data-theme="falling-code-matrix"] .chess-layout,
body[data-theme="falling-code-matrix"] .confirm-modal,
body[data-theme="falling-code-matrix"] .game-selection-overlay {
    position: relative;
    z-index: 1;
}

/* ===== RESET Y ESTILOS GLOBALES ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--font-main);
    background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
    color: var(--theme-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-theme), color var(--transition-theme);
}

/* ===== SCROLLBAR PERSONALIZADO ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent-primary) var(--theme-bg-primary);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--theme-bg-primary);
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--theme-accent-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 5px;
    border: 2px solid var(--theme-bg-primary);
    transition: background var(--transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--theme-accent-primary) 100%);
    box-shadow: 0 0 8px var(--theme-shadow-glow);
}

/* ===== TRANSICIONES DE TEMA ===== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color var(--transition-theme),
                color var(--transition-theme),
                border-color var(--transition-theme),
                box-shadow var(--transition-theme) !important;
}

/* ===== UTILIDADES GLOBALES ===== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.text-gold {
    color: var(--color-primary);
}

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

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

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px var(--theme-shadow-glow);
    }
    50% {
        box-shadow: 0 0 20px var(--theme-shadow-glow);
    }
}

/* ===== CLASES DE ANIMACIÓN ===== */
.fade-in {
    animation: fadeIn var(--transition-normal);
}

.fade-in-up {
    animation: fadeInUp var(--transition-slow);
}

.slide-in {
    animation: slideIn var(--transition-normal);
}

.pulse {
    animation: pulse 2s infinite;
}

.glow {
    animation: glow 2s infinite;
}