/* Colors CSS - Premium Dark Mode für Astro-App */
/* Mystisches, esoterisches Dark Design mit Wow-Effekt */
/* Gemäß briefing/design.md Regel 002: Dark Mode / Mystisches Dunkelheit-Design */

:root {
    /* ============================================================================ */
    /* PRIMARY COLORS - Dark Mode Theme */
    /* ============================================================================ */
    
    /* Haupt-Hintergrund: Tiefes Schwarz bis sehr dunkles Violett-Schwarz */
    --color-background-primary: #0A0A0A;
    --color-background-primary-rgb: 10, 10, 10;
    
    --color-background-secondary: #0D0818;
    --color-background-secondary-rgb: 13, 8, 24;
    
    --color-background-tertiary: #1A0F2E;
    --color-background-tertiary-rgb: 26, 15, 46;
    
    /* Sekundäre Hintergründe: Dunkles Violett für Content-Bereiche */
    --color-surface-primary: rgba(26, 15, 46, 0.9);
    --color-surface-primary-rgb: 26, 15, 46;
    
    --color-surface-secondary: rgba(20, 10, 30, 0.8);
    --color-surface-secondary-rgb: 20, 10, 30;
    
    /* ============================================================================ */
    /* TEXT COLORS - Helle Schrift auf dunklem Hintergrund */
    /* ============================================================================ */
    
    --color-text-primary: #E8E8E8;
    --color-text-primary-rgb: 232, 232, 232;
    
    --color-text-secondary: #B8B8B8;
    --color-text-secondary-rgb: 184, 184, 184;
    
    --color-text-tertiary: #888888;
    --color-text-tertiary-rgb: 136, 136, 136;
    
    --color-text-light: #FFFFFF;
    --color-text-light-rgb: 255, 255, 255;
    
    --color-text-dark: #1A1A1A;
    --color-text-dark-rgb: 26, 26, 26;
    
    /* ============================================================================ */
    /* MYSTICAL ACCENT COLORS - Esoterische Glow-Effekte */
    /* ============================================================================ */
    
    /* Sternen-Gold mit Shimmer */
    --color-primary: #FFD700;
    --color-primary-rgb: 255, 215, 0;
    
    --color-primary-light: #FFED4E;
    --color-primary-light-rgb: 255, 237, 78;
    
    --color-primary-dark: #DAA520;
    --color-primary-dark-rgb: 218, 165, 32;
    
    /* Mystik-Violett mit Neon-Glow - Heller für Dark Mode */
    --color-secondary: #C77DFF;
    --color-secondary-rgb: 199, 125, 255;
    
    --color-secondary-light: #E0B0FF;
    --color-secondary-light-rgb: 224, 176, 255;
    
    --color-secondary-dark: #9D4EDD;
    --color-secondary-dark-rgb: 157, 78, 221;
    
    /* Cosmic Cyan - Interaktive Elemente */
    --color-accent: #00F5FF;
    --color-accent-rgb: 0, 245, 255;
    
    --color-accent-light: #40FFFF;
    --color-accent-light-rgb: 64, 255, 255;
    
    --color-accent-dark: #00CED1;
    --color-accent-dark-rgb: 0, 206, 209;
    
    /* Magenta-Mystik */
    --color-highlight: #FF006E;
    --color-highlight-rgb: 255, 0, 110;
    
    /* ============================================================================ */
    /* STATUS COLORS mit Glow */
    /* ============================================================================ */
    
    --color-success: #228B22;
    --color-success-rgb: 34, 139, 34;
    
    --color-warning: #FFA500;
    --color-warning-rgb: 255, 165, 0;
    
    --color-error: #DC143C;
    --color-error-rgb: 220, 20, 60;
    --color-error-dark: #B22222;
    --color-error-dark-rgb: 178, 34, 34;
    --color-error-light: #FF6B6B;
    --color-error-light-rgb: 255, 107, 107;
    
    --color-info: #00CED1;
    --color-info-rgb: 0, 206, 209;
    
    /* ============================================================================ */
    /* BORDERS & DIVIDERS - Dunkle Linien mit Glow */
    /* ============================================================================ */
    
    --color-border-primary: #2A2A2A;
    --color-border-primary-rgb: 42, 42, 42;
    
    --color-border-secondary: rgba(199, 125, 255, 0.4);
    --color-border-secondary-rgb: 199, 125, 255;
    
    --color-border-tertiary: rgba(255, 215, 0, 0.3);
    --color-border-tertiary-rgb: 255, 215, 0;
    
    /* ============================================================================ */
    /* UTILITY COLORS */
    /* ============================================================================ */
    
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;
    
    /* ============================================================================ */
    /* GLOW & SHADOW EFFECTS - Stärker für Dark Mode */
    /* ============================================================================ */
    
    --glow-primary: 0 0 30px rgba(255, 215, 0, 0.8);
    --glow-secondary: 0 0 40px rgba(199, 125, 255, 0.9);
    --glow-accent: 0 0 35px rgba(0, 245, 255, 0.8);
    
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.8);
    --shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.9);
    --shadow-strong: 0 12px 60px rgba(0, 0, 0, 1);
    
    /* ============================================================================ */
    /* GRADIENT DEFINITIONS - Kosmische Verläufe für Dark Mode */
    /* ============================================================================ */
    
    --gradient-cosmic: linear-gradient(135deg, #0A0A0A 0%, #191970 50%, #0D0818 100%);
    --gradient-nebula: radial-gradient(ellipse at center, rgba(157, 78, 221, 0.3) 0%, rgba(255, 215, 0, 0.2) 50%, transparent 70%);
    --gradient-aurora: linear-gradient(90deg, #4B0082 0%, #00F5FF 50%, #FFD700 100%);
    --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --gradient-violet: linear-gradient(135deg, #4B0082 0%, #C77DFF 100%);
    --gradient-mystical: linear-gradient(135deg, #FFD700 0%, #9D4EDD 50%, #00F5FF 100%);
}

/* ============================================================================ */
/* THEME CLASSES für Body */
/* ============================================================================ */

/* Dark Mode (Standard) */
/* Gemäß Regel 031: body Definition ist nur in fonts.css erlaubt */
/* Dark Mode ist jetzt der Standard gemäß briefing/design.md Regel 002 */
.theme-dark {
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}

/* Light Mode - Legacy Support (Optional) */
.theme-light {
    /* Kosmischer heller Hintergrund */
    --color-background-primary: #FFFFFF;
    --color-background-primary-rgb: 255, 255, 255;
    
    --color-background-secondary: #F8F9FA;
    --color-background-secondary-rgb: 248, 249, 250;
    
    --color-background-tertiary: #E5E5E5;
    --color-background-tertiary-rgb: 229, 229, 229;
    
    /* Helle Oberflächen */
    --color-surface-primary: #F8F9FA;
    --color-surface-primary-rgb: 248, 249, 250;
    
    --color-surface-secondary: #FFFFFF;
    --color-surface-secondary-rgb: 255, 255, 255;
    
    /* Dunkle Texte auf hellem Hintergrund */
    --color-text-primary: #1A1A1A;
    --color-text-primary-rgb: 26, 26, 26;
    
    --color-text-secondary: #4A4A4A;
    --color-text-secondary-rgb: 74, 74, 74;
    
    --color-text-tertiary: #6A6A6A;
    --color-text-tertiary-rgb: 106, 106, 106;
    
    /* Light Theme Background */
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 50%, #FFFFFF 100%);
    color: var(--color-text-primary);
    
    /* Border-Farben für Light Mode */
    --color-border-primary: #E5E5E5;
    --color-border-secondary: rgba(255, 215, 0, 0.3);
}