/* ==============================================
   SISTEMA AVANÇADO DE TEMAS - RASPADINHA
   Versão 2.0 - Melhorado e Otimizado
   ============================================== */

/* Base Variables - Shared across all themes */
:root {
    /* Timing Functions */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Animations */
    --transition-fast: 0.2s var(--ease-smooth);
    --transition-normal: 0.3s var(--ease-smooth);
    --transition-slow: 0.5s var(--ease-smooth);
    
    /* Effects */
    --glow-strength: 0 0 30px;
    --blur-amount: 20px;
    --hover-lift: translateY(-2px);
    --active-press: scale(0.98);
}

/* ==============================================
   TEMA VERDE ESMERALDA (Padrão)
   ============================================== */
[data-theme="verde"] {
    --primary-color: #22c55e;
    --primary-dark: #16a34a;
    --primary-darker: #15803d;
    --primary-darkest: #14532d;
    --primary-light: rgba(34, 197, 94, 0.1);
    --primary-lighter: rgba(34, 197, 94, 0.05);
    --primary-border: rgba(34, 197, 94, 0.2);
    --primary-shadow: rgba(34, 197, 94, 0.3);
    --primary-shadow-strong: rgba(34, 197, 94, 0.4);
    --primary-glow: rgba(34, 197, 94, 0.6);
    --primary-gradient: linear-gradient(135deg, #22c55e, #16a34a);
    --primary-gradient-light: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 163, 74, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #16a34a, #15803d);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #22c55e 0%, #16a34a 60%, #15803d 100%);
    --accent-color: #10b981;
    --accent-light: rgba(16, 185, 129, 0.1);
}

/* ==============================================
   TEMA LARANJA SUNSET
   ============================================== */
[data-theme="laranja"] {
    --primary-color: #fb923c;
    --primary-dark: #ea580c;
    --primary-darker: #c2410c;
    --primary-darkest: #9a3412;
    --primary-light: rgba(251, 146, 60, 0.1);
    --primary-lighter: rgba(251, 146, 60, 0.05);
    --primary-border: rgba(251, 146, 60, 0.2);
    --primary-shadow: rgba(251, 146, 60, 0.3);
    --primary-shadow-strong: rgba(251, 146, 60, 0.4);
    --primary-glow: rgba(251, 146, 60, 0.6);
    --primary-gradient: linear-gradient(135deg, #fb923c, #ea580c);
    --primary-gradient-light: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(234, 88, 12, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #ea580c, #c2410c);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #fb923c 0%, #ea580c 60%, #c2410c 100%);
    --accent-color: #f97316;
    --accent-light: rgba(249, 115, 22, 0.1);
}

/* ==============================================
   TEMA VERMELHO RUBI
   ============================================== */
[data-theme="vermelho"] {
    --primary-color: #ef4444;
    --primary-dark: #dc2626;
    --primary-darker: #b91c1c;
    --primary-darkest: #991b1b;
    --primary-light: rgba(239, 68, 68, 0.1);
    --primary-lighter: rgba(239, 68, 68, 0.05);
    --primary-border: rgba(239, 68, 68, 0.2);
    --primary-shadow: rgba(239, 68, 68, 0.3);
    --primary-shadow-strong: rgba(239, 68, 68, 0.4);
    --primary-glow: rgba(239, 68, 68, 0.6);
    --primary-gradient: linear-gradient(135deg, #ef4444, #dc2626);
    --primary-gradient-light: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #dc2626, #b91c1c);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
    --accent-color: #f87171;
    --accent-light: rgba(248, 113, 113, 0.1);
}

/* ==============================================
   TEMA ROSA CHICLETE
   ============================================== */
[data-theme="rosa"] {
    --primary-color: #ec4899;
    --primary-dark: #db2777;
    --primary-darker: #be185d;
    --primary-darkest: #9f1239;
    --primary-light: rgba(236, 72, 153, 0.1);
    --primary-lighter: rgba(236, 72, 153, 0.05);
    --primary-border: rgba(236, 72, 153, 0.2);
    --primary-shadow: rgba(236, 72, 153, 0.3);
    --primary-shadow-strong: rgba(236, 72, 153, 0.4);
    --primary-glow: rgba(236, 72, 153, 0.6);
    --primary-gradient: linear-gradient(135deg, #ec4899, #db2777);
    --primary-gradient-light: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #db2777, #be185d);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #ec4899 0%, #db2777 60%, #be185d 100%);
    --accent-color: #f472b6;
    --accent-light: rgba(244, 114, 182, 0.1);
}

/* ==============================================
   TEMA AZUL OCEANO
   ============================================== */
[data-theme="azul"] {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-darker: #1d4ed8;
    --primary-darkest: #1e40af;
    --primary-light: rgba(59, 130, 246, 0.1);
    --primary-lighter: rgba(59, 130, 246, 0.05);
    --primary-border: rgba(59, 130, 246, 0.2);
    --primary-shadow: rgba(59, 130, 246, 0.3);
    --primary-shadow-strong: rgba(59, 130, 246, 0.4);
    --primary-glow: rgba(59, 130, 246, 0.6);
    --primary-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
    --primary-gradient-light: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #2563eb, #1d4ed8);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
    --accent-color: #60a5fa;
    --accent-light: rgba(96, 165, 250, 0.1);
}

/* ==============================================
   TEMA ROXO AMETISTA
   ============================================== */
[data-theme="roxo"] {
    --primary-color: #a855f7;
    --primary-dark: #9333ea;
    --primary-darker: #7e22ce;
    --primary-darkest: #6b21a8;
    --primary-light: rgba(168, 85, 247, 0.1);
    --primary-lighter: rgba(168, 85, 247, 0.05);
    --primary-border: rgba(168, 85, 247, 0.2);
    --primary-shadow: rgba(168, 85, 247, 0.3);
    --primary-shadow-strong: rgba(168, 85, 247, 0.4);
    --primary-glow: rgba(168, 85, 247, 0.6);
    --primary-gradient: linear-gradient(135deg, #a855f7, #9333ea);
    --primary-gradient-light: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #9333ea, #7e22ce);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #a855f7 0%, #9333ea 60%, #7e22ce 100%);
    --accent-color: #c084fc;
    --accent-light: rgba(192, 132, 252, 0.1);
}

/* ==============================================
   TEMA DOURADO PREMIUM
   ============================================== */
[data-theme="dourado"] {
    --primary-color: #facc15;
    --primary-dark: #eab308;
    --primary-darker: #ca8a04;
    --primary-darkest: #a16207;
    --primary-light: rgba(250, 204, 21, 0.1);
    --primary-lighter: rgba(250, 204, 21, 0.05);
    --primary-border: rgba(250, 204, 21, 0.2);
    --primary-shadow: rgba(250, 204, 21, 0.3);
    --primary-shadow-strong: rgba(250, 204, 21, 0.4);
    --primary-glow: rgba(250, 204, 21, 0.6);
    --primary-gradient: linear-gradient(135deg, #facc15, #eab308);
    --primary-gradient-light: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(234, 179, 8, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #eab308, #ca8a04);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #facc15 0%, #eab308 60%, #ca8a04 100%);
    --accent-color: #fde047;
    --accent-light: rgba(253, 224, 71, 0.1);
}

/* ==============================================
   TEMA CIANO NEON
   ============================================== */
[data-theme="ciano"] {
    --primary-color: #06b6d4;
    --primary-dark: #0891b2;
    --primary-darker: #0e7490;
    --primary-darkest: #155e75;
    --primary-light: rgba(6, 182, 212, 0.1);
    --primary-lighter: rgba(6, 182, 212, 0.05);
    --primary-border: rgba(6, 182, 212, 0.2);
    --primary-shadow: rgba(6, 182, 212, 0.3);
    --primary-shadow-strong: rgba(6, 182, 212, 0.4);
    --primary-glow: rgba(6, 182, 212, 0.6);
    --primary-gradient: linear-gradient(135deg, #06b6d4, #0891b2);
    --primary-gradient-light: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05));
    --primary-gradient-hover: linear-gradient(135deg, #0891b2, #0e7490);
    --primary-gradient-radial: radial-gradient(circle at 30% 107%, #06b6d4 0%, #0891b2 60%, #0e7490 100%);
    --accent-color: #22d3ee;
    --accent-light: rgba(34, 211, 238, 0.1);
}

/* ==============================================
   APLICAÇÃO DAS VARIÁVEIS NOS ELEMENTOS
   ============================================== */

/* Override GLOBAL de todas as cores verdes hardcoded */
[data-theme] * {
    /* Força substituição de TODAS as cores inline e hardcoded */
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Substituição global de cores específicas */
[data-theme]:not([data-theme="verde"]) {
    /* Substitui #22c55e */
    & [style*="#22c55e"],
    & [style*="34, 197, 94"],
    & [style*="rgb(34, 197, 94)"] {
        filter: hue-rotate(var(--hue-rotation)) saturate(var(--saturation)) brightness(var(--brightness)) !important;
    }
}

/* Definir rotação de matiz para cada tema */
[data-theme="laranja"] {
    --hue-rotation: -40deg;
    --saturation: 1.2;
    --brightness: 1.1;
}

[data-theme="vermelho"] {
    --hue-rotation: -70deg;
    --saturation: 1.1;
    --brightness: 1;
}

[data-theme="rosa"] {
    --hue-rotation: -25deg;
    --saturation: 1.1;
    --brightness: 1.05;
}

[data-theme="azul"] {
    --hue-rotation: 120deg;
    --saturation: 0.9;
    --brightness: 0.95;
}

[data-theme="roxo"] {
    --hue-rotation: 180deg;
    --saturation: 1;
    --brightness: 1;
}

/* Logo e Brand */
.logo {
    color: var(--primary-color) !important;
}

.logo-icon {
    background: var(--primary-gradient) !important;
}

/* Header */
.header {
    border-bottom-color: var(--primary-border) !important;
}

.nav-menu a:hover {
    color: var(--primary-color) !important;
}

.nav-menu a::after {
    background: var(--primary-color) !important;
}

.btn-login:hover {
    color: var(--primary-color) !important;
}

.btn-register {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

.btn-register:hover {
    box-shadow: 0 8px 30px var(--primary-shadow-strong) !important;
}

/* Hero Section */
.hero-subtitle {
    color: var(--primary-dark) !important;
}

/* Steps Section */
.steps-grid::before {
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        var(--primary-color) 33%, 
        var(--primary-shadow) 33%, 
        var(--primary-shadow) 66%, 
        var(--primary-shadow) 66%, 
        var(--primary-shadow) 100%
    ) !important;
}

.step-icon {
    border-color: var(--primary-border) !important;
}

.step-icon::before {
    background: radial-gradient(circle at center, var(--primary-light) 0%, transparent 70%) !important;
}

.step-icon.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    box-shadow: 
        0 0 30px var(--primary-shadow),
        0 0 60px var(--primary-light) !important;
    background: linear-gradient(145deg, var(--primary-light) 0%, var(--primary-lighter) 100%) !important;
}

.step-icon:hover {
    border-color: rgba(var(--primary-color), 0.6) !important;
    color: var(--primary-color) !important;
}

.step-title.active {
    color: var(--primary-color) !important;
}

.step-item:hover .step-title {
    color: var(--primary-color) !important;
}

/* Games Section */
.game-category {
    border-color: var(--primary-border) !important;
}

.game-category::before {
    background: 
        radial-gradient(circle at 20% 20%, var(--primary-light) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--primary-lighter) 0%, transparent 50%) !important;
}

.game-category:hover {
    border-color: rgba(var(--primary-color), 0.4) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px var(--primary-light) !important;
}

.game-icon {
    background: linear-gradient(135deg, rgba(var(--primary-color), 0.15) 0%, rgba(var(--primary-dark), 0.1) 100%) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary-color) !important;
}

.game-category:hover .game-icon {
    border-color: var(--primary-color) !important;
    background: linear-gradient(135deg, rgba(var(--primary-color), 0.2) 0%, rgba(var(--primary-dark), 0.15) 100%) !important;
    box-shadow: 
        0 0 40px var(--primary-shadow),
        0 0 80px var(--primary-light) !important;
}

.game-category:hover .game-title {
    color: var(--primary-color) !important;
}

.game-btn {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 20px var(--primary-shadow) !important;
}

.game-btn:hover {
    background: var(--primary-gradient-hover) !important;
    box-shadow: 0 8px 30px var(--primary-shadow-strong) !important;
}

/* Prize Carousel */
.prize-item {
    background: var(--primary-gradient-light) !important;
    border-color: var(--primary-border) !important;
}

.prize-value {
    color: var(--primary-color) !important;
}

/* Footer */
.footer {
    border-top-color: var(--primary-border) !important;
}

.footer-brand {
    color: var(--primary-color) !important;
}

.footer-links a:hover {
    color: var(--primary-color) !important;
}

.footer-bottom {
    border-top-color: var(--primary-border) !important;
}

/* Loading Spinner */
.loading-spinner::before {
    border-color: var(--primary-shadow) !important;
    border-top-color: var(--primary-color) !important;
}

/* Glow Effects */
.glow {
    box-shadow: 0 0 20px var(--primary-shadow) !important;
}

.glow:hover {
    box-shadow: 0 0 30px rgba(var(--primary-color), 0.5) !important;
}

/* Highlight Text */
.highlight-text {
    color: var(--primary-color) !important;
}

/* Forms and Inputs (Login/Cadastro) */
.brand-logo {
    background: var(--primary-gradient) !important;
    box-shadow: 0 20px 40px var(--primary-shadow) !important;
}

.brand-logo::after {
    background: var(--primary-gradient) !important;
}

.feature-icon,
.benefit-icon {
    background: rgba(var(--primary-color), 0.2) !important;
    color: var(--primary-color) !important;
}

.login-card::before,
.cadastro-card::before {
    background: var(--primary-gradient) !important;
}

.form-input:focus {
    border-color: rgba(var(--primary-color), 0.5) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.submit-btn {
    background: var(--primary-gradient) !important;
    box-shadow: 0 8px 25px var(--primary-shadow) !important;
}

.submit-btn:hover {
    box-shadow: 0 12px 35px var(--primary-shadow-strong) !important;
}

.register-link,
.login-link {
    color: var(--primary-color) !important;
}

/* Raspadinha Page */
.header-card {
    background: var(--primary-gradient-light) !important;
    border-color: var(--primary-border) !important;
}

.header-card::before,
.header-card::after {
    background: linear-gradient(45deg, var(--primary-light), transparent) !important;
}

.cartela-overlay {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), var(--primary-light)) !important;
}

.price-badge {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 16px var(--primary-shadow-strong) !important;
}

.instructions {
    background: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
}

.instructions h3 {
    color: var(--primary-color) !important;
}

.instruction-icon {
    color: var(--primary-color) !important;
}

.prizes-section {
    border-color: var(--primary-border) !important;
}

.prize-tag {
    background: var(--primary-gradient) !important;
}

.action-btn {
    background: var(--primary-gradient) !important;
    box-shadow: 0 8px 32px var(--primary-shadow) !important;
}

.action-btn:hover {
    background: var(--primary-gradient-hover) !important;
    box-shadow: 0 12px 40px var(--primary-shadow-strong) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark) !important;
}