/*
 * Farb- und Designsystem für pdfmaker.
 *
 * Alle Farben, Schatten, Rundungen und Abstände sind hier als Custom
 * Properties deklariert. Außerhalb dieser Datei gibt es keine
 * hardgecodeten `#xxxxxx`-Werte – stattdessen immer `var(--...)`.
 *
 * Grundlage: DESIGN-VORGABEN.md
 *   - Hell-Modus "Soft Aurora Gradient"
 *   - Dunkel-Modus "Warm Glow on Black"
 *
 * Gemeinsam in beiden Modi:
 *   - gleiche Rundungen und Abstände
 *   - gleicher Primärakzent (#FFB800)
 *   - gleiche Typo-Gewichte, geometrische Sans-Serif
 */

:root {
    /* --- Abstände, Rundungen, Typografie (modusunabhängig) ------------- */
    --radius-klein:   8px;
    --radius-mittel: 12px;
    --radius-gross:  16px;
    --radius-karte:  20px;
    --radius-container: 28px;

    --abstand-xxs:  4px;
    --abstand-xs:   8px;
    --abstand-s:   12px;
    --abstand-m:   16px;
    --abstand-l:   24px;
    --abstand-xl:  32px;
    --abstand-xxl: 48px;

    --schrift-familie: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
    --schrift-monospace: "Fira Code", "Cascadia Code", ui-monospace, Menlo, monospace;

    --gewicht-normal:   400;
    --gewicht-mittel:   500;
    --gewicht-kraeftig: 600;
    --gewicht-fett:     700;

    /* Gemeinsamer Primärakzent: das Signal-Gelb aus dem Dunkelmodus,
       funktioniert auch im Hellmodus gut als Highlight. */
    --akzent:        #FFB800;
    --akzent-tief:   #E88A00;
    --akzent-weich:  #FFDB78;

    /* --- Hell-Modus "Soft Aurora Gradient" ---------------------------- */
    --basis:           #F8F5F0;       /* Porzellan-Creme */
    --flaeche:         #FFFFFF;       /* Karten */
    --flaeche-erhöht: #FFFFFF;
    --flaeche-hover:   #F3EEE5;

    --text:            #0A0A0A;
    --text-gedämpft:  #333333;
    --text-meta:       #8A8A8A;
    --linie:           #E5E5E5;
    --linie-stark:     #D6D2CB;

    --knopf-primaer-bg:   #0A0A0A;
    --knopf-primaer-text: #FFFFFF;
    --knopf-sekundaer-bg: #FFFFFF;
    --knopf-sekundaer-text: #0A0A0A;
    --knopf-sekundaer-rand: #D6D2CB;

    --eingabe-bg:      #FFFFFF;
    --eingabe-rand:    #D6D2CB;
    --eingabe-rand-fokus: #0A0A0A;

    --info-bg:         #D4F2E2;   /* Soft Mint */
    --info-text:       #0A0A0A;
    --fehler-bg:       #F8D4DC;   /* Soft Rose */
    --fehler-text:     #7A1E2F;

    --schatten-weich:  0 4px 24px rgba(0, 0, 0, 0.04);
    --schatten-karte:  0 2px 12px rgba(0, 0, 0, 0.06);
    --schatten-tief:   0 12px 40px rgba(0, 0, 0, 0.08);

    /* Abdunkler für Modal-Overlays (eigene Variable, damit Hell/Dunkel
       unabhängig gewählt werden kann). */
    --modal-overlay:   rgba(10, 10, 10, 0.45);

    /* Akzentuierung für Editor-Auswahl (leichtes Akzent-Gelb). */
    --auswahl-akzent:  rgba(255, 184, 0, 0.25);

    /* Aurora-Gradienten als einzelne Layer für die Body-Tapete */
    --aurora-1: radial-gradient(closest-side at 15% 20%, #E8D5F2 0%, transparent 70%);
    --aurora-2: radial-gradient(closest-side at 85% 10%, #F5D5E0 0%, transparent 70%);
    --aurora-3: radial-gradient(closest-side at 75% 80%, #FDE4D3 0%, transparent 70%);
    --aurora-4: radial-gradient(closest-side at 20% 85%, #D4E8E0 0%, transparent 70%);
    --aurora-5: radial-gradient(closest-side at 50% 50%, #FBE8C8 0%, transparent 70%);
    --aurora-blur: 80px;
    --aurora-saturierung: 1.0;
    --aurora-opacity: 0.8;
}

/* --- Dunkel-Modus "Warm Glow on Black" -------------------------------- */
html.dunkel {
    --basis:           #1A1A1A;
    --flaeche:         #242424;
    --flaeche-erhöht: #2E2E2E;
    --flaeche-hover:   #2E2E2E;

    --text:            #F5F5F5;
    --text-gedämpft:  #B8B8B8;
    --text-meta:       #6E6E6E;
    --linie:           #3A3A3A;
    --linie-stark:     #4A4A4A;

    --knopf-primaer-bg:   #FFB800;
    --knopf-primaer-text: #1A1A1A;
    --knopf-sekundaer-bg: #2E2E2E;
    --knopf-sekundaer-text: #F5F5F5;
    --knopf-sekundaer-rand: #3A3A3A;

    --eingabe-bg:      #242424;
    --eingabe-rand:    #3A3A3A;
    --eingabe-rand-fokus: #FFB800;

    --info-bg:         rgba(255, 184, 0, 0.12);  /* warmer Gelbschimmer */
    --info-text:       #FFDB78;
    --fehler-bg:       rgba(214, 114, 0, 0.15);
    --fehler-text:     #FFB800;

    --schatten-weich:  0 4px 24px rgba(0, 0, 0, 0.4);
    --schatten-karte:  0 0 40px rgba(255, 184, 0, 0.15);
    --schatten-tief:   0 12px 40px rgba(0, 0, 0, 0.5);

    /* Overlay im Dunkelmodus: sehr dunkler Schleier, damit Modals
       gegen die dunkle Bühne noch klar abheben. */
    --modal-overlay:   rgba(0, 0, 0, 0.65);

    /* Dunkelmodus: Auswahl zieht das Signal-Gelb als stärkeres Highlight. */
    --auswahl-akzent:  rgba(255, 184, 0, 0.30);

    /* Im Dunkelmodus keine bunten Aurora-Spots, dafür ein warmer Gelb-Glow. */
    --aurora-1: radial-gradient(closest-side at 20% 20%, rgba(255, 184, 0, 0.12) 0%, transparent 70%);
    --aurora-2: radial-gradient(closest-side at 80% 10%, rgba(255, 201, 71, 0.08) 0%, transparent 70%);
    --aurora-3: radial-gradient(closest-side at 75% 85%, rgba(245, 161, 0, 0.10) 0%, transparent 70%);
    --aurora-4: radial-gradient(closest-side at 15% 80%, rgba(255, 219, 120, 0.06) 0%, transparent 70%);
    --aurora-5: radial-gradient(closest-side at 50% 50%, rgba(232, 138, 0, 0.05) 0%, transparent 70%);
    --aurora-blur: 100px;
    --aurora-saturierung: 1.1;
    --aurora-opacity: 1.0;
}