/**
 * Wunschlern Farbschema
 * Basierend auf dem Logo-Design mit Königsblau, Sonnengelb und Regenbogen-Akzenten
 */

:root {
    /* === Primärfarben (Brand Colors) === */
    --primary-blue: #1E5FA1;           /* Königsblau - Hauptfarbe aus dem Logo-Schild */
    --primary-blue-dark: #164878;      /* Dunkleres Blau für Hover-Effekte */
    --primary-blue-light: #2E7BC4;     /* Helleres Blau für subtile Akzente */

    --secondary-yellow: #FFB800;       /* Sonnengelb/Orange - Energie und Optimismus */
    --secondary-yellow-dark: #E0A000;  /* Dunkleres Gelb für Hover */
    --secondary-yellow-light: #FFC933; /* Helleres Gelb für Highlights */

    /* === Akzentfarben aus dem Wissensbaum === */
    --accent-green: #10B981;           /* Smaragdgrün - Wissenschaft/Wachstum */
    --accent-purple: #8B5CF6;          /* Violett - Kreativität */
    --accent-cyan: #06B6D4;            /* Cyan/Hellblau - Technik */
    --accent-red: #EF4444;             /* Rot - Wichtige Hinweise */
    --accent-orange: #F97316;          /* Orange - Aktive Elemente */

    /* === Hintergrundfarben === */
    /* Light Mode */
    --bg-light: #F4F7FA;               /* Sehr helles Graublau - Haupt-Hintergrund */
    --bg-light-secondary: #FFFFFF;     /* Weiß - Cards, Panels */
    --bg-light-hover: #E8EEF3;         /* Hover-Zustand für interaktive Elemente */

    /* Dark Mode */
    --bg-dark: #0D1B2A;                /* Tiefes Nachtblau - Haupt-Hintergrund */
    --bg-dark-secondary: #1B2838;      /* Sekundärer Hintergrund für Cards */
    --bg-dark-hover: #243647;          /* Hover-Zustand für Dark Mode */

    /* === Textfarben === */
    --text-primary-light: #1F2937;     /* Dunkles Grau - Haupttext Light Mode */
    --text-secondary-light: #6B7280;   /* Mittleres Grau - Sekundärtext Light Mode */
    --text-tertiary-light: #9CA3AF;    /* Helles Grau - Tertiärtext Light Mode */

    --text-primary-dark: #F9FAFB;      /* Fast Weiß - Haupttext Dark Mode */
    --text-secondary-dark: #D1D5DB;    /* Helles Grau - Sekundärtext Dark Mode */
    --text-tertiary-dark: #9CA3AF;     /* Mittleres Grau - Tertiärtext Dark Mode */

    /* === Gradienten === */
    --gradient-primary: linear-gradient(135deg, #1E5FA1 0%, #2E7BC4 100%);
    --gradient-secondary: linear-gradient(135deg, #FFB800 0%, #FFC933 100%);
    --gradient-hero: linear-gradient(135deg, #1E5FA1 0%, #10B981 100%);
    --gradient-rainbow: linear-gradient(90deg,
        #06B6D4 0%,      /* Cyan */
        #10B981 16.67%,  /* Grün */
        #FFB800 33.33%,  /* Gelb */
        #F97316 50%,     /* Orange */
        #EF4444 66.67%,  /* Rot */
        #8B5CF6 83.33%,  /* Violett */
        #1E5FA1 100%     /* Blau */
    );

    /* === Schatten & Effekte === */
    --shadow-sm: 0 1px 2px rgba(30, 95, 161, 0.05);
    --shadow-md: 0 4px 6px rgba(30, 95, 161, 0.1);
    --shadow-lg: 0 10px 25px rgba(30, 95, 161, 0.15);
    --shadow-xl: 0 20px 40px rgba(30, 95, 161, 0.2);

    --glow-primary: 0 0 20px rgba(30, 95, 161, 0.3);
    --glow-secondary: 0 0 20px rgba(255, 184, 0, 0.3);

    /* === Abstände & Größen === */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-full: 9999px;

    /* === Transition === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* === Spezielle Klassen für häufige Anwendungen === */

.bg-primary {
    background-color: var(--primary-blue);
}

.bg-secondary {
    background-color: var(--secondary-yellow);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-secondary {
    background: var(--gradient-secondary);
}

.bg-gradient-hero {
    background: var(--gradient-hero);
}

.text-primary {
    color: var(--primary-blue);
}

.text-secondary {
    color: var(--secondary-yellow);
}

.border-primary {
    border-color: var(--primary-blue);
}

.border-secondary {
    border-color: var(--secondary-yellow);
}

/* Hover-Effekte */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hover-glow-primary:hover {
    box-shadow: var(--glow-primary);
}

.hover-glow-secondary:hover {
    box-shadow: var(--glow-secondary);
}

/* Button-Styles mit neuen Farben */
.btn-wunschlern-primary {
    background: var(--gradient-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-full);
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-wunschlern-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
}

.btn-wunschlern-secondary {
    background: var(--gradient-secondary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-full);
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-wunschlern-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-secondary);
}

.btn-wunschlern-outline {
    background: white;
    color: var(--primary-blue);
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--primary-blue);
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-wunschlern-outline:hover {
    background: var(--primary-blue);
    color: white;
}