/* color-classes.css - УНИВЕРСАЛЬНЫЕ КЛАССЫ ДЛЯ ВСЕХ СТРАНИЦ */
/* ТОЛЬКО ЦВЕТА! НИКАКИХ РАЗМЕРОВ! */

:root {
    --color-primary: #00f0ff;
    --color-secondary: #ff5fd2;
    --color-accent: #ffd966;
    --color-success: #2effc7;
    --color-info: #6aa8ff;
    --color-warning: #ff9966;
    --color-danger: #ff3366;
    --color-highlight: #b36bff;
    --color-deck: #b36bff;
    
    --bg-body: #2a2f4a;
    --bg-surface: #353a55;
    --bg-elevated: #3a3f5a;
    --bg-overlay: rgba(42, 47, 74, 0.9);
    --bg-overlay-light: rgba(42, 47, 74, 0.95);
    --bg-header: #353a55;
    --bg-coming-soon: rgba(42, 47, 74, 0.95);
    --bg-nav: rgba(0, 0, 0, 0.3);
    
    --text-primary: #ffffff;
    --text-secondary: #ccccff;
    --text-inverse: #000000;
    --text-muted: rgba(255, 255, 255, 0.4);
    --text-slot: rgba(255, 255, 255, 0.4);
    
    --border-primary: #00f0ff;
    --border-secondary: #ff5fd2;
    --border-accent: #ffd966;
    --border-success: #2effc7;
    --border-info: #6aa8ff;
    --border-deck: #b36bff;
    --border-muted: rgba(255, 255, 255, 0.3);
    --border-dark: rgba(0, 0, 0, 0.2);
    --border-dashed: rgba(255, 255, 255, 0.3);
    
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 25px rgba(0, 240, 255, 0.4);
    --glow-secondary: 0 0 25px rgba(255, 95, 210, 0.4);

    /* === ПОДСВЕТКА ПАР ВИЛОК (переопределяются в каждой теме) === */
    --arb-hl-0: #ff5fd2;
    --arb-hl-1: #ffd966;
    --arb-hl-2: #b36bff;
    --arb-hl-3: #2effc7;
    --arb-hl-4: #ff9966;
}

/* === 🃏 СТАТИЧНЫЕ ЦВЕТА КАРТ === */
.text-red { color: #ff3366 !important; }
.text-black { color: #000000 !important; }
.bg-card-white { background: #ffffff !important; }
.bg-deck-card { background: #ffffff !important; }
.border-card-light { border-color: rgba(0, 0, 0, 0.2) !important; }
.shadow-card { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important; }
.shadow-card-hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important; }
.deck-card-border { border-color: transparent !important; }
.deck-card-shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; }

/* === ТЕКСТ === */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-info { color: var(--color-info); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-highlight { color: var(--color-highlight); }
.text-light { color: var(--text-primary); }
.text-medium { color: var(--text-secondary); }
.text-dark { color: var(--text-inverse); }
.text-muted { color: var(--text-muted); }
.text-slot { color: var(--text-slot); }
.text-win { color: var(--color-primary); }
.text-opp { color: var(--color-secondary); }
.text-tie { color: var(--color-info); }

/* === ФОНЫ === */
.bg-primary-solid { background: var(--color-primary); }
.bg-secondary-solid { background: var(--color-secondary); }
.bg-accent-solid { background: var(--color-accent); }
.bg-success-solid { background: var(--color-success); }
.bg-info-solid { background: var(--color-info); }
.bg-warning-solid { background: var(--color-warning); }
.bg-danger-solid { background: var(--color-danger); }
.bg-highlight-solid { background: var(--color-highlight); }

.bg-body { background-color: var(--bg-body); }
.bg-surface { background: var(--bg-surface); }
.bg-elevated { background: var(--bg-elevated); }
.bg-overlay { background: var(--bg-overlay); }
.bg-overlay-light { background: var(--bg-overlay-light); }
.bg-header { background: var(--bg-header); }
.bg-coming-soon { background: var(--bg-coming-soon); }
.bg-nav { background: var(--bg-nav); }

/* === ГРАДИЕНТЫ === */
.gradient-primary { background: linear-gradient(45deg, var(--color-secondary), var(--color-highlight)); }
.gradient-header { background: var(--bg-header); }
.gradient-logo { background: linear-gradient(135deg, var(--color-primary), var(--color-highlight)); }
.text-gradient {
    background: linear-gradient(45deg, var(--color-secondary), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === ГРАНИЦЫ === */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-accent { border-color: var(--border-accent); }
.border-success { border-color: var(--border-success); }
.border-info { border-color: var(--border-info); }
.border-deck { border-color: var(--border-deck); }
.border-muted { border-color: var(--border-muted); }
.border-dark { border-color: var(--border-dark); }
.border-dashed { border-color: var(--border-dashed); }

/* === ТЕНИ === */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-default { box-shadow: var(--shadow-md); }
.glow-primary { box-shadow: var(--glow-primary); }
.glow-secondary { box-shadow: var(--glow-secondary); }

/* === КНОПКИ === */
.btn-primary-bg { background: linear-gradient(45deg, var(--color-secondary), var(--color-highlight)); }
.btn-primary-text { color: var(--text-primary); }

.btn-secondary-bg { background: rgba(0, 240, 255, 0.1); }
.btn-secondary-text { color: var(--color-primary); }
.btn-secondary-border { border-color: var(--color-primary); }
.btn-secondary:hover {
    background: var(--color-primary) !important;
    color: var(--text-primary) !important;
}

/* === КНОПКИ ОППОНЕНТОВ === */
.opponent-pill {
    border-color: var(--color-info) !important;
    background: rgba(106, 168, 255, 0.1) !important;
    color: var(--color-info) !important;
}
.opponent-pill:hover {
    background: rgba(106, 168, 255, 0.3) !important;
}
.opponent-pill.active {
    background: var(--color-info) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-info) !important;
    box-shadow: 0 0 15px var(--color-info) !important;
}

/* === КНОПКИ ИСХОДОВ === */
.outcome-pill {
    border-color: var(--color-info) !important;
    background: rgba(106, 168, 255, 0.1) !important;
    color: var(--color-info) !important;
}
.outcome-pill:hover {
    background: rgba(106, 168, 255, 0.3) !important;
}
.outcome-pill.active {
    background: var(--color-info) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-info) !important;
    box-shadow: 0 0 15px var(--color-info) !important;
}

/* === ЛОГОТИП === */
.logo-gradient { background: linear-gradient(135deg, var(--color-primary), var(--color-highlight)); }
.logo-text-gradient {
    background: linear-gradient(45deg, var(--color-success), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === НАВИГАЦИЯ === */
.nav-bg { background: var(--bg-nav); }

.nav-link-bg {
    background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,0,0,0.1));
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.nav-link-bg:hover {
    background: linear-gradient(145deg, rgba(0,102,255,0.2), rgba(153,51,255,0.2)) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.nav-link-active {
    background: linear-gradient(145deg, var(--color-primary), var(--color-highlight)) !important;
    border-color: var(--color-success) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3) !important;
}

/* === ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА === */
.lang-btn.active {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 10px var(--color-accent) !important;
    background: rgba(255, 217, 102, 0.15) !important;
}

.lang-btn.active .lang-flag {
    border-color: var(--color-accent) !important;
}

/* === ПЕРЕКЛЮЧАТЕЛЬ ТЕМ === */
.theme-switcher {
    background: var(--theme-switcher-bg);
    border-color: var(--theme-switcher-border);
}

.theme-btn {
    background: var(--theme-btn-bg);
    color: var(--theme-btn-text);
}

.theme-btn:hover {
    border-color: var(--theme-btn-hover-border);
    box-shadow: 0 0 15px var(--theme-btn-hover-glow);
}

.theme-btn.active {
    background: var(--theme-btn-active-bg);
    color: var(--theme-btn-active-text);
    border-color: var(--theme-btn-active-border);
    box-shadow: 0 0 15px var(--theme-btn-active-glow);
}

/* === КАРТОЧКИ === */
.card-bg { background: var(--bg-surface); }
.card-border { border-color: var(--color-primary); }
.card-icon-border { border-color: var(--color-primary); }
.card-icon-color { color: var(--color-primary); }

/* === FAQ === */
.faq-border { border-color: var(--color-success); }
.faq-item-border { border-bottom-color: rgba(46, 255, 199, 0.2); }
.faq-question { color: var(--color-success); }
.faq-answer { color: var(--text-secondary); }

/* === ФУТЕР === */
.footer-bg { background: var(--bg-surface); }
.footer-border { border-top-color: var(--color-primary); }
.footer-text { color: var(--text-secondary); }

/* === ПОКЕР === */
.hand-border { border-color: var(--color-primary); }
.board-border { border-color: var(--color-secondary); }
.hand-title { color: var(--color-primary); }
.board-title { color: var(--color-secondary); }

.slot-bg { background: rgba(255, 255, 255, 0.08); }
.slot-border { border-color: var(--border-muted); }

.opponent-border { border-color: var(--color-info); }
.opponent-bg { background: rgba(106, 168, 255, 0.1); }
.opponent-text { color: var(--color-info); }

/* === УНИВЕРСАЛЬНЫЕ ГРАНИЦЫ === */
.border-1 { border-color: var(--border-1) !important; }
.border-2 { border-color: var(--border-2) !important; }
.border-3 { border-color: var(--border-3) !important; }
.border-4 { border-color: var(--border-4) !important; }
.border-5 { border-color: var(--border-5) !important; }
.border-6 { border-color: var(--border-6) !important; }
.border-7 { border-color: var(--border-7) !important; }

/* === УНИВЕРСАЛЬНЫЙ ТЕКСТ === */
.text-1 { color: var(--text-1) !important; }
.text-2 { color: var(--text-2) !important; }
.text-3 { color: var(--text-3) !important; }
.text-4 { color: var(--text-4) !important; }
.text-5 { color: var(--text-5) !important; }
.text-6 { color: var(--text-6) !important; }
.text-7 { color: var(--text-7) !important; }

/* === РЕЗУЛЬТАТЫ === */
.result-win { color: var(--color-primary); }
.result-opp { color: var(--color-secondary); }
.result-tie { color: var(--color-info); }

/* === ПРЕДУПРЕЖДЕНИЯ === */
.warning-text { color: var(--color-warning); }

/* === DRAG-OVER === */
.hand-section.drag-over:not(.drag-over-no-space) {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 20px var(--color-primary) !important;
}
.board-section.drag-over:not(.drag-over-no-space) {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 20px var(--color-secondary) !important;
}
#deck.drag-over:not(.drag-over-no-space) {
    border-color: var(--color-deck) !important;
    box-shadow: 0 0 20px var(--color-deck) !important;
}

/* === ИНДИКАТОР АКТИВНОГО БЛОКА === */
.section-title::before {
    border-color: transparent !important;
}
.hand-section.active .section-title::before,
.board-section.active .section-title::before {
    background-color: var(--color-danger) !important;
    box-shadow: 0 0 10px var(--color-danger) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

.hand-section .card-slot.drag-over {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 15px var(--color-primary) !important;
}

.board-section .card-slot.drag-over {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 15px var(--color-secondary) !important;
}

/* === ПОДСВЕТКА ПАР ВИЛОК === */
.arb-highlight-0 { border-color: var(--arb-hl-0) !important; box-shadow: 0 0 8px var(--arb-hl-0) !important; }
.arb-highlight-1 { border-color: var(--arb-hl-1) !important; box-shadow: 0 0 8px var(--arb-hl-1) !important; }
.arb-highlight-2 { border-color: var(--arb-hl-2) !important; box-shadow: 0 0 8px var(--arb-hl-2) !important; }
.arb-highlight-3 { border-color: var(--arb-hl-3) !important; box-shadow: 0 0 8px var(--arb-hl-3) !important; }
.arb-highlight-4 { border-color: var(--arb-hl-4) !important; box-shadow: 0 0 8px var(--arb-hl-4) !important; }