/**
 * CSS Variables - Farb-Zentrale
 * 
 * HIER KANNST DU ALLE FARBEN & DESIGNS ÄNDERN!
 * Einfach die Werte anpassen und die gesamte App ändert sich!
 * 
 * @package RadioMonitor
 * @version 1.0
 */

/* ============================================
   🎨 HAUPT-FARBEN
   ============================================ */
:root {
    /* Primary Colors (Haupt-Akzentfarbe) */
    --color-primary: #00aaff;           /* Cyan - für Buttons, Links */
    --color-primary-hover: #0088cc;     /* Dunkleres Cyan - Hover */
    --color-primary-dark: #006699;      /* Noch dunkler */
    --color-primary-light: #33bbff;     /* Helleres Cyan */
    
    /* Success (Online, Erfolg) */
    --color-success: #00ff88;           /* Neon-Grün */
    --color-success-hover: #00cc6a;
    --color-success-dark: #00994d;
    
    /* Danger (Offline, Fehler) */
    --color-danger: #ff4444;            /* Rot */
    --color-danger-hover: #cc3636;
    --color-danger-dark: #992929;
    
    /* Warning (Warnung) */
    --color-warning: #ffaa00;           /* Orange */
    --color-warning-hover: #cc8800;
    --color-warning-dark: #996600;
    
    /* Info */
    --color-info: #17a2b8;              /* Türkis */
    --color-info-hover: #138496;
    
    /* Secondary (Sekundär) */
    --color-secondary: #6c757d;         /* Grau */
    --color-secondary-hover: #565e64;

    /* ============================================
       🌑 HINTERGRUND-FARBEN (Dark Theme)
       ============================================ */
    
    /* Haupt-Hintergründe */
    --bg-primary: #0a0a0a;              /* Tiefschwarz - Body */
    --bg-secondary: #1a1a1a;            /* Dunkelgrau - Cards, Panels */
    --bg-tertiary: #151515;             /* Fast Schwarz - Sidebar */
    --bg-quaternary: #0f0f0f;           /* Zwischen-Ton */
    
    /* Interaktive Hintergründe */
    --bg-hover: #252525;                /* Hover-Effekt */
    --bg-active: #2a2a2a;               /* Aktiver Zustand */
    --bg-disabled: #1a1a1a;             /* Deaktiviert */
    
    /* Input-Hintergründe */
    --bg-input: #1f1f1f;                /* Input-Felder */
    --bg-input-focus: #252525;          /* Input Focus */
    
    /* Modal & Overlays */
    --bg-modal: #1a1a1a;                /* Modal-Hintergrund */
    --bg-overlay: rgba(0, 0, 0, 0.85);  /* Overlay (transparent) */
    
    /* Code & Pre */
    --bg-code: #0d0d0d;                 /* Code-Blöcke */

    /* ============================================
       📝 TEXT-FARBEN
       ============================================ */
    
    --text-primary: #e0e0e0;            /* Haupt-Text (hell) */
    --text-secondary: #a0a0a0;          /* Sekundär-Text (gedimmt) */
    --text-muted: #606060;              /* Stark gedimmt */
    --text-inverse: #0a0a0a;            /* Text auf hellem Hintergrund */
    --text-disabled: #4a4a4a;           /* Deaktiviert */
    
    /* Link-Farben */
    --text-link: var(--color-primary);
    --text-link-hover: var(--color-primary-light);
    --text-link-visited: #8866ff;

    /* ============================================
       🔲 BORDER & LINIEN
       ============================================ */
    
    --border-color: #2a2a2a;            /* Standard-Border */
    --border-color-light: #333333;      /* Hellerer Border */
    --border-color-dark: #1a1a1a;       /* Dunklerer Border */
    --border-color-focus: var(--color-primary);  /* Focus-Border */
    
    --border-radius: 8px;               /* Standard-Rundung */
    --border-radius-sm: 4px;            /* Klein */
    --border-radius-lg: 12px;           /* Groß */
    --border-radius-xl: 16px;           /* Sehr groß */
    --border-radius-pill: 50px;         /* Pill-Form (Badges) */
    
    --border-width: 1px;                /* Standard-Breite */
    --border-width-thick: 2px;          /* Dick */

    /* ============================================
       🌫️ SCHATTEN
       ============================================ */
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    
    /* Spezial-Schatten */
    --shadow-glow: 0 0 20px rgba(0, 170, 255, 0.3);  /* Glow-Effekt */
    --shadow-success: 0 0 15px rgba(0, 255, 136, 0.3);
    --shadow-danger: 0 0 15px rgba(255, 68, 68, 0.3);

    /* ============================================
       📏 ABSTÄNDE
       ============================================ */
    
    --spacing-xs: 0.25rem;              /* 4px */
    --spacing-sm: 0.5rem;               /* 8px */
    --spacing-md: 1rem;                 /* 16px */
    --spacing-lg: 1.5rem;               /* 24px */
    --spacing-xl: 2rem;                 /* 32px */
    --spacing-2xl: 3rem;                /* 48px */
    --spacing-3xl: 4rem;                /* 64px */

    /* ============================================
       🔤 SCHRIFTEN
       ============================================ */
    
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-heading: var(--font-primary);
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;            /* 12px */
    --font-size-sm: 0.875rem;           /* 14px */
    --font-size-base: 1rem;             /* 16px */
    --font-size-lg: 1.125rem;           /* 18px */
    --font-size-xl: 1.25rem;            /* 20px */
    --font-size-2xl: 1.5rem;            /* 24px */
    --font-size-3xl: 1.875rem;          /* 30px */
    --font-size-4xl: 2.25rem;           /* 36px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================
       ⚡ TRANSITIONS & ANIMATIONS
       ============================================ */
    
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
       📐 LAYOUT-DIMENSIONEN
       ============================================ */
    
    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    
    /* Header */
    --header-height: 60px;
    
    /* Container */
    --container-max-width: 1400px;
    --container-padding: var(--spacing-lg);
    
    /* Cards */
    --card-padding: var(--spacing-lg);
    --card-padding-sm: var(--spacing-md);

    /* ============================================
       📊 TABELLEN
       ============================================ */
    
    --table-bg: var(--bg-secondary);
    --table-header-bg: var(--bg-tertiary);
    --table-stripe-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.05);
    --table-border-color: var(--border-color);
    --table-padding: var(--spacing-md);

    /* ============================================
       🏷️ BADGES & TAGS
       ============================================ */
    
    --badge-online: var(--color-success);
    --badge-offline: var(--color-danger);
    --badge-warning: var(--color-warning);
    --badge-info: var(--color-info);
    --badge-padding: 0.25rem 0.75rem;
    --badge-font-size: var(--font-size-sm);

    /* ============================================
       🔘 BUTTONS
       ============================================ */
    
    --btn-padding: 0.5rem 1.25rem;
    --btn-padding-sm: 0.375rem 0.875rem;
    --btn-padding-lg: 0.75rem 1.75rem;
    --btn-font-size: var(--font-size-base);
    --btn-border-radius: var(--border-radius);
    --btn-transition: var(--transition-normal);

    /* ============================================
       📥 FORMS & INPUTS
       ============================================ */
    
    --input-height: 42px;
    --input-height-sm: 36px;
    --input-height-lg: 48px;
    --input-padding: 0.5rem 1rem;
    --input-border-color: var(--border-color);
    --input-border-color-focus: var(--color-primary);
    --input-border-radius: var(--border-radius);

    /* ============================================
       📈 CHARTS
       ============================================ */
    
    --chart-primary: var(--color-primary);
    --chart-success: var(--color-success);
    --chart-danger: var(--color-danger);
    --chart-warning: var(--color-warning);
    --chart-info: var(--color-info);
    --chart-grid-color: rgba(255, 255, 255, 0.1);
    --chart-text-color: var(--text-secondary);

    /* ============================================
       🔔 NOTIFICATIONS & ALERTS
       ============================================ */
    
    --alert-padding: var(--spacing-md);
    --alert-border-radius: var(--border-radius);
    --alert-success-bg: rgba(0, 255, 136, 0.1);
    --alert-success-border: var(--color-success);
    --alert-danger-bg: rgba(255, 68, 68, 0.1);
    --alert-danger-border: var(--color-danger);
    --alert-warning-bg: rgba(255, 170, 0, 0.1);
    --alert-warning-border: var(--color-warning);
    --alert-info-bg: rgba(23, 162, 184, 0.1);
    --alert-info-border: var(--color-info);

    /* ============================================
       📱 Z-INDEX
       ============================================ */
    
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;

    /* ============================================
       🌈 ZUSÄTZLICHE FARBEN (Optional)
       ============================================ */
    
    --color-purple: #8b5cf6;
    --color-pink: #ec4899;
    --color-indigo: #6366f1;
    --color-teal: #14b8a6;
    --color-lime: #84cc16;
    --color-amber: #f59e0b;
}

/* ============================================
   🌙 DARK THEME OVERRIDES (Falls gewünscht)
   ============================================ */
[data-theme="dark"] {
    /* Bereits Standard - hier für Anpassungen */
}

/* ============================================
   💡 LIGHT THEME (Optional - auskommentiert)
   ============================================ */
/*
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #e2e6ea;
    
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    --border-color: #dee2e6;
    --border-color-light: #e9ecef;
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
}
*/

/* ============================================
   🎨 ALTERNATIVE COLOR SCHEMES
   Einfach auskommentieren um zu aktivieren!
   ============================================ */

/* Blau-Violett */
/*
:root {
    --color-primary: #667eea;
    --color-success: #48bb78;
}
*/

/* Grün-Akzent */
/*
:root {
    --color-primary: #10b981;
    --color-success: #34d399;
}
*/

/* Lila-Pink */
/*
:root {
    --color-primary: #a855f7;
    --color-success: #22d3ee;
}
*/

/* Rot-Orange */
/*
:root {
    --color-primary: #f97316;
    --color-success: #84cc16;
}
*/

/* ============================================
   📱 RESPONSIVE BREAKPOINTS
   (Für Media Queries in anderen CSS-Dateien)
   ============================================ */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* ============================================
   ✨ SONDERFÄLLE
   ============================================ */

/* Scrollbar (Webkit) */
:root {
    --scrollbar-width: 10px;
    --scrollbar-track-bg: var(--bg-tertiary);
    --scrollbar-thumb-bg: var(--bg-hover);
    --scrollbar-thumb-hover-bg: var(--color-primary);
}

/* Selection (Text markieren) */
:root {
    --selection-bg: var(--color-primary);
    --selection-text: var(--text-inverse);
}