/**
 * Twitch-WP Design Tokens
 * Zentrales Design-System mit CSS-Variablen und Fallbacks
 * 
 * @package TwitchStatusbar
 * @since 1.1.0
 */

:root {
    /* === FARBEN === */
    
    /* Primary Brand Colors */
    --twitch-primary: #9146FF;
    --twitch-primary-hover: #7B3FE4;
    --twitch-primary-light: rgba(145, 70, 255, 0.1);
    --twitch-primary-shadow: rgba(145, 70, 255, 0.3);
    
    /* Status Colors */
    --twitch-live: #ff4444;
    --twitch-live-dark: #cc0000;
    --twitch-live-shadow: rgba(255, 68, 68, 0.5);
    --twitch-offline: #6c757d;
    --twitch-offline-dark: #495057;
    --twitch-vod: #6441a4;
    --twitch-vod-dark: #4c2a85;
    
    /* Background Colors */
    --twitch-bg-primary: #f8f9fa;
    --twitch-bg-secondary: #ffffff;
    --twitch-bg-dark: #0f0f23;
    --twitch-bg-darker: #1f1f3a;
    --twitch-bg-card: #ffffff;
    --twitch-bg-section: #ffffff;
    
    /* Text Colors */
    --twitch-text-primary: #2c3e50;
    --twitch-text-secondary: #6c757d;
    --twitch-text-muted: rgba(108, 117, 125, 0.8);
    --twitch-text-white: #ffffff;
    --twitch-text-white-muted: rgba(255, 255, 255, 0.9);
    --twitch-text-white-light: rgba(255, 255, 255, 0.8);
    
    /* Border Colors */
    --twitch-border-light: #e9ecef;
    --twitch-border-medium: #dee2e6;
    --twitch-border-white: rgba(255, 255, 255, 0.3);
    --twitch-border-white-hover: rgba(255, 255, 255, 0.6);
    
    /* Shadow Colors */
    --twitch-shadow-light: rgba(0, 0, 0, 0.08);
    --twitch-shadow-medium: rgba(0, 0, 0, 0.15);
    --twitch-shadow-dark: rgba(0, 0, 0, 0.3);
    --twitch-shadow-darker: rgba(0, 0, 0, 0.5);
    
    /* Error & Success Colors */
    --twitch-error: #dc3545;
    --twitch-error-dark: #c82333;
    --twitch-error-bg: #f8d7da;
    --twitch-error-border: #f5c6cb;
    --twitch-error-text: #721c24;
    --twitch-success: #28a745;
    --twitch-success-dark: #1e7e34;
    
    /* === ABSTÄNDE === */
    
    /* Spacing Scale (4px base) */
    --twitch-space-xs: 4px;
    --twitch-space-sm: 8px;
    --twitch-space-md: 12px;
    --twitch-space-lg: 16px;
    --twitch-space-xl: 20px;
    --twitch-space-2xl: 24px;
    --twitch-space-3xl: 30px;
    --twitch-space-4xl: 40px;
    --twitch-space-5xl: 50px;
    --twitch-space-6xl: 60px;
    
    /* Container Sizes */
    --twitch-container-max: 1200px;
    --twitch-container-padding: var(--twitch-space-xl);
    
    /* === TYPOGRAFIE === */
    
    /* Font Families */
    --twitch-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --twitch-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Font Sizes */
    --twitch-text-xs: 10px;
    --twitch-text-sm: 12px;
    --twitch-text-base: 14px;
    --twitch-text-md: 15px;
    --twitch-text-lg: 16px;
    --twitch-text-xl: 18px;
    --twitch-text-2xl: 20px;
    --twitch-text-3xl: 24px;
    --twitch-text-4xl: 28px;
    --twitch-text-5xl: 36px;
    --twitch-text-6xl: 48px;
    
    /* Font Weights */
    --twitch-font-normal: 400;
    --twitch-font-medium: 500;
    --twitch-font-semibold: 600;
    --twitch-font-bold: 700;
    
    /* Line Heights */
    --twitch-leading-tight: 1.3;
    --twitch-leading-normal: 1.4;
    --twitch-leading-relaxed: 1.6;
    
    /* === BORDER RADIUS === */
    --twitch-radius-sm: 4px;
    --twitch-radius-md: 6px;
    --twitch-radius-lg: 8px;
    --twitch-radius-xl: 12px;
    --twitch-radius-full: 50%;
    
    /* === SCHATTEN === */
    --twitch-shadow-sm: 0 2px 4px var(--twitch-shadow-light);
    --twitch-shadow-md: 0 2px 8px var(--twitch-shadow-light);
    --twitch-shadow-lg: 0 4px 12px var(--twitch-shadow-medium);
    --twitch-shadow-xl: 0 4px 20px var(--twitch-shadow-dark);
    --twitch-shadow-2xl: 0 8px 25px var(--twitch-shadow-medium);
    
    /* === ÜBERGÄNGE === */
    --twitch-transition-fast: 0.2s ease;
    --twitch-transition-normal: 0.3s ease;
    --twitch-transition-slow: 0.5s ease;
    
    /* === Z-INDEX SCALE === */
    --twitch-z-dropdown: 1000;
    --twitch-z-modal: 10000;
    --twitch-z-tooltip: 100000;
    
    /* === BREAKPOINTS (für JavaScript) === */
    --twitch-bp-sm: 480px;
    --twitch-bp-md: 768px;
    --twitch-bp-lg: 1024px;
    --twitch-bp-xl: 1200px;
    
    /* === COMPONENT-SPEZIFISCHE TOKENS === */
    
    /* Statusbar */
    --twitch-statusbar-height: 50px;
    --twitch-statusbar-bg: var(--twitch-primary);
    --twitch-statusbar-text: var(--twitch-text-white);
    --twitch-statusbar-offline-bg: var(--twitch-offline);
    
    /* Hub */
    --twitch-hub-bg: var(--twitch-bg-primary);
    --twitch-hub-card-bg: var(--twitch-bg-card);
    --twitch-hub-section-bg: var(--twitch-bg-section);
    
    /* Player */
    --twitch-player-bg: var(--twitch-bg-dark);
    --twitch-player-min-height: 400px;
    --twitch-player-border-radius: var(--twitch-radius-lg);
    
    /* Video Cards */
    --twitch-video-card-bg: var(--twitch-bg-card);
    --twitch-video-card-border: var(--twitch-border-light);
    --twitch-video-card-shadow: var(--twitch-shadow-md);
    --twitch-video-card-hover-shadow: var(--twitch-shadow-2xl);
    
    /* Buttons */
    --twitch-btn-primary-bg: var(--twitch-primary);
    --twitch-btn-primary-hover: var(--twitch-primary-hover);
    --twitch-btn-secondary-bg: var(--twitch-border-white);
    --twitch-btn-secondary-hover: rgba(255, 255, 255, 0.15);
}

/* === DARK MODE OVERRIDES === */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background Colors für Dark Mode */
        --twitch-bg-primary: #1a1a1a;
        --twitch-bg-secondary: #2d2d2d;
        --twitch-bg-card: #2d2d2d;
        --twitch-bg-section: #2d2d2d;
        
        /* Text Colors für Dark Mode */
        --twitch-text-primary: #ffffff;
        --twitch-text-secondary: #b0b0b0;
        --twitch-text-muted: rgba(176, 176, 176, 0.8);
        
        /* Border Colors für Dark Mode */
        --twitch-border-light: #404040;
        --twitch-border-medium: #555555;
        
        /* Shadow Colors für Dark Mode */
        --twitch-shadow-light: rgba(0, 0, 0, 0.3);
        --twitch-shadow-medium: rgba(0, 0, 0, 0.5);
        --twitch-shadow-dark: rgba(0, 0, 0, 0.7);
        --twitch-shadow-darker: rgba(0, 0, 0, 0.8);
    }
}

/* === HIGH CONTRAST MODE OVERRIDES === */
@media (prefers-contrast: high) {
    :root {
        /* Erhöhte Kontraste */
        --twitch-border-light: #000000;
        --twitch-border-medium: #000000;
        --twitch-text-secondary: #000000;
        --twitch-shadow-light: rgba(0, 0, 0, 0.8);
        --twitch-shadow-medium: rgba(0, 0, 0, 0.9);
    }
}

/* === REDUCED MOTION OVERRIDES === */
@media (prefers-reduced-motion: reduce) {
    :root {
        /* Deaktivierte Übergänge */
        --twitch-transition-fast: none;
        --twitch-transition-normal: none;
        --twitch-transition-slow: none;
    }
}

/* === FALLBACK-SYSTEM FÜR ÄLTERE BROWSER === */

/* Fallback-Klassen für Browser ohne CSS Custom Properties Support */
.no-css-custom-properties {
    /* Fallback-Werte werden in den jeweiligen CSS-Dateien definiert */
}

/* Feature Detection für CSS Custom Properties */
@supports not (color: var(--test)) {
    .twitch-statusbar {
        background: #9146FF; /* Fallback */
        color: #ffffff; /* Fallback */
    }
    
    .twitch-hub-container {
        background: #f8f9fa; /* Fallback */
    }
    
    .twitch-hub-section {
        background: #ffffff; /* Fallback */
        border-color: #e9ecef; /* Fallback */
    }
}

/* === UTILITY CLASSES === */

/* Spacing Utilities */
.twitch-p-xs { padding: var(--twitch-space-xs, 4px) !important; }
.twitch-p-sm { padding: var(--twitch-space-sm, 8px) !important; }
.twitch-p-md { padding: var(--twitch-space-md, 12px) !important; }
.twitch-p-lg { padding: var(--twitch-space-lg, 16px) !important; }
.twitch-p-xl { padding: var(--twitch-space-xl, 20px) !important; }

.twitch-m-xs { margin: var(--twitch-space-xs, 4px) !important; }
.twitch-m-sm { margin: var(--twitch-space-sm, 8px) !important; }
.twitch-m-md { margin: var(--twitch-space-md, 12px) !important; }
.twitch-m-lg { margin: var(--twitch-space-lg, 16px) !important; }
.twitch-m-xl { margin: var(--twitch-space-xl, 20px) !important; }

/* Color Utilities */
.twitch-text-primary { color: var(--twitch-text-primary, #2c3e50) !important; }
.twitch-text-secondary { color: var(--twitch-text-secondary, #6c757d) !important; }
.twitch-text-white { color: var(--twitch-text-white, #ffffff) !important; }

.twitch-bg-primary { background-color: var(--twitch-primary, #9146FF) !important; }
.twitch-bg-secondary { background-color: var(--twitch-bg-secondary, #ffffff) !important; }

/* Border Radius Utilities */
.twitch-rounded-sm { border-radius: var(--twitch-radius-sm, 4px) !important; }
.twitch-rounded-md { border-radius: var(--twitch-radius-md, 6px) !important; }
.twitch-rounded-lg { border-radius: var(--twitch-radius-lg, 8px) !important; }
.twitch-rounded-xl { border-radius: var(--twitch-radius-xl, 12px) !important; }
.twitch-rounded-full { border-radius: var(--twitch-radius-full, 50%) !important; }

/* Shadow Utilities */
.twitch-shadow-sm { box-shadow: var(--twitch-shadow-sm, 0 2px 4px rgba(0,0,0,0.08)) !important; }
.twitch-shadow-md { box-shadow: var(--twitch-shadow-md, 0 2px 8px rgba(0,0,0,0.08)) !important; }
.twitch-shadow-lg { box-shadow: var(--twitch-shadow-lg, 0 4px 12px rgba(0,0,0,0.15)) !important; }
.twitch-shadow-xl { box-shadow: var(--twitch-shadow-xl, 0 4px 20px rgba(0,0,0,0.3)) !important; }

/* === DEBUGGING UTILITIES === */
.twitch-debug-tokens {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--twitch-bg-card, #ffffff);
    border: 1px solid var(--twitch-border-light, #e9ecef);
    border-radius: var(--twitch-radius-md, 6px);
    padding: var(--twitch-space-md, 12px);
    font-size: var(--twitch-text-sm, 12px);
    font-family: var(--twitch-font-mono, monospace);
    z-index: var(--twitch-z-tooltip, 100000);
    max-width: 300px;
    box-shadow: var(--twitch-shadow-lg, 0 4px 12px rgba(0,0,0,0.15));
}

/* === PRINT OVERRIDES === */
@media print {
    :root {
        /* Vereinfachte Farben für Druck */
        --twitch-primary: #000000;
        --twitch-text-primary: #000000;
        --twitch-text-secondary: #666666;
        --twitch-bg-primary: #ffffff;
        --twitch-bg-card: #ffffff;
        --twitch-shadow-sm: none;
        --twitch-shadow-md: none;
        --twitch-shadow-lg: none;
        --twitch-shadow-xl: none;
    }
}