/* ========================================
   THEMES - CSS Custom Properties
   3 Themes: Light, Werder Bremen, Dark
   ======================================== */

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --accent: #1D6D37;
    --accent-hover: #155a2b;
    --accent-light: #e8f5ec;
    --border: #e0e0e0;
    --shadow: rgba(0, 0, 0, 0.08);
    --nav-bg: #ffffff;
    --nav-text: #1a1a1a;
    --input-bg: #ffffff;
    --input-border: #ccc;
    --badge-bg: #e8f5ec;
    --badge-text: #1D6D37;
    --live-bg: #fee2e2;
    --live-text: #dc2626;
    --player-bg: #f0f0f0;
    --player-progress: #1D6D37;
    --btn-primary-bg: #1D6D37;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #155a2b;
    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-text: #1a1a1a;
    --btn-secondary-border: #e0e0e0;
    --btn-cta-bg: #1D6D37;
    --btn-cta-text: #ffffff;
    --btn-cta-hover: #155a2b;
    --theme-btn-bg: transparent;
    --theme-btn-border: #e0e0e0;
    --theme-btn-hover-bg: #e8f5ec;
}

[data-theme="werder"] {
    --bg-primary: #1D6D37;
    --bg-secondary: #166029;
    --bg-card: #1f7a3d;
    --text-primary: #ffffff;
    --text-secondary: #d4e8da;
    --accent: #ffffff;
    --accent-hover: #d4e8da;
    --accent-light: rgba(255, 255, 255, 0.15);
    --border: #2a8a4a;
    --shadow: rgba(0, 0, 0, 0.2);
    --nav-bg: #145528;
    --nav-text: #ffffff;
    --input-bg: #1f7a3d;
    --input-border: #2a8a4a;
    --badge-bg: rgba(255, 255, 255, 0.2);
    --badge-text: #ffffff;
    --live-bg: rgba(255, 70, 70, 0.3);
    --live-text: #ffcccc;
    --player-bg: #145528;
    --player-progress: #ffffff;
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1D6D37;
    --btn-primary-hover: #d4e8da;
    --btn-secondary-bg: #145528;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #2a8a4a;
    --btn-cta-bg: #ffffff;
    --btn-cta-text: #1D6D37;
    --btn-cta-hover: #d4e8da;
    --theme-btn-bg: rgba(255, 255, 255, 0.1);
    --theme-btn-border: rgba(255, 255, 255, 0.3);
    --theme-btn-hover-bg: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #252525;
    --text-primary: #e0e0e0;
    --text-secondary: #999999;
    --accent: #2ecc71;
    --accent-hover: #27ae60;
    --accent-light: rgba(46, 204, 113, 0.15);
    --border: #333333;
    --shadow: rgba(0, 0, 0, 0.3);
    --nav-bg: #1a1a1a;
    --nav-text: #e0e0e0;
    --input-bg: #2a2a2a;
    --input-border: #444;
    --badge-bg: rgba(46, 204, 113, 0.2);
    --badge-text: #2ecc71;
    --live-bg: rgba(220, 38, 38, 0.3);
    --live-text: #ff6b6b;
    --player-bg: #1a1a1a;
    --player-progress: #2ecc71;
    --btn-primary-bg: #2ecc71;
    --btn-primary-text: #121212;
    --btn-primary-hover: #27ae60;
    --btn-secondary-bg: #2a2a2a;
    --btn-secondary-text: #e0e0e0;
    --btn-secondary-border: #444;
    --btn-cta-bg: #2ecc71;
    --btn-cta-text: #121212;
    --btn-cta-hover: #27ae60;
    --theme-btn-bg: #2a2a2a;
    --theme-btn-border: #555;
    --theme-btn-hover-bg: rgba(46, 204, 113, 0.2);
}