:root {

    /* --------------------------------------------------------
       Farben – Grün
       -------------------------------------------------------- */

    --gruen-900: #123D36;
    --gruen-800: #174B42;
    --gruen-700: #1F5F54;
    --gruen-600: #287366;
    --gruen-500: #3C8779;

    --gruen-100: #DDEDEA;
    --gruen-50: #F1F7F5;


    /* --------------------------------------------------------
       Farben – Neutral
       -------------------------------------------------------- */

    --weiss: #FFFFFF;

    --grau-50: #F7F8F7;
    --grau-100: #EEF0EF;
    --grau-200: #DDE1DF;
    --grau-300: #C7CDCA;

    --grau-500: #707A76;
    --grau-600: #56605C;
    --grau-700: #3F4744;
    --grau-800: #292F2D;
    --grau-900: #1B201E;


    /* --------------------------------------------------------
       Statusfarben
       -------------------------------------------------------- */

    --erfolg: #2F7D4A;
    --erfolg-hintergrund: #E7F4EB;

    --warnung: #A66A16;
    --warnung-hintergrund: #FFF4DF;

    --fehler: #B63B3B;
    --fehler-hintergrund: #FDEBEC;

    --info: #2D648C;
    --info-hintergrund: #EAF3F8;


    /* --------------------------------------------------------
       Semantische Farben
       -------------------------------------------------------- */

    --farbe-primaer: var(--gruen-700);
    --farbe-primaer-hover: var(--gruen-800);
    --farbe-primaer-aktiv: var(--gruen-900);


    /* Sekundärfarbe: wird pro Parlament in base.html überschrieben
       (siehe parlamente.py, Feld "farbe_sekundaer"); hier nur ein
       sinnvoller Standardwert (Bundestag-Gold) für den Fall, dass kein
       Parlaments-Kontext vorliegt (z. B. Login-Seite). */
    --farbe-sekundaer: #B7952F;
    --farbe-sekundaer-hover: #9C7D22;
    --farbe-sekundaer-hell: rgba(183, 149, 39, 0.14);

    --farbe-seitenhintergrund: var(--grau-50);

    --farbe-oberflaeche: var(--weiss);
    --farbe-oberflaeche-dezent: var(--grau-100);

    --farbe-text: var(--grau-900);
    --farbe-text-sekundaer: var(--grau-600);
    --farbe-text-dezent: var(--grau-500);

    --farbe-rahmen: var(--grau-200);
    --farbe-rahmen-stark: var(--grau-300);

    --farbe-link: var(--gruen-700);
    --farbe-link-hover: var(--gruen-900);

    --fehler-hover: #962F2F;

    /* Zusätzliche, an anderer Stelle im Projekt bereits verwendete
       Bezeichnungen für dieselben Werte (Aliase) - hier zentral
       aufgelöst, damit sie über var()-Indirektion automatisch mit
       eingefärbt werden, sobald oben ein Dark-Theme aktiv ist. */
    --farbe-hauptfarbe: var(--farbe-primaer);
    --farbe-primaer-dunkel: var(--farbe-primaer-aktiv);
    --farbe-text-gedaempft: var(--farbe-text-dezent);
    --farbe-text-mittel: var(--farbe-text-sekundaer);
    --farbe-text-nebenbei: var(--farbe-text-dezent);
    --farbe-hintergrund: var(--farbe-oberflaeche-dezent);
    --schatten-dezent: var(--schatten-klein);
    --radius-mittel: var(--radius-normal);

    /* Echte neue Tokens (kein Alias - eigener Wert je Theme) */
    --farbe-primaer-hell: rgba(31, 95, 84, 0.12);
    --farbe-oberflaeche-hover: var(--grau-50);


    /* --------------------------------------------------------
       Rundungen
       -------------------------------------------------------- */

    --radius-klein: 4px;
    --radius-normal: 6px;
    --radius-gross: 10px;


    /* --------------------------------------------------------
       Schatten
       -------------------------------------------------------- */

    --schatten-klein: 0 1px 2px rgba(0, 0, 0, 0.04);

    --schatten-normal: 0 2px 6px rgba(0, 0, 0, 0.06);

    --schatten-gross: 0 8px 24px rgba(0, 0, 0, 0.08);


    /* --------------------------------------------------------
       Abstände
       -------------------------------------------------------- */

    --abstand-1: 4px;
    --abstand-2: 8px;
    --abstand-3: 12px;
    --abstand-4: 16px;
    --abstand-5: 24px;
    --abstand-6: 32px;
    --abstand-7: 48px;
    --abstand-8: 64px;


    /* --------------------------------------------------------
       Seitenbreiten
       -------------------------------------------------------- */

    --seitenbreite-schmal: 800px;
    --seitenbreite: 1200px;
    --seitenbreite-breit: 1440px;

    --seitenrand-desktop: 32px;
    --seitenrand-tablet: 24px;
    --seitenrand-mobil: 16px;
}


/* ================================================================
   DARKMODE
   ================================================================
   Zwei Wege, ihn zu aktivieren:
   1. Automatisch nach Systemeinstellung (prefers-color-scheme),
      solange die Person keine eigene Wahl getroffen hat.
   2. Manuell über den Umschalter (setzt data-theme="dark" bzw.
      "light" auf <html> und merkt sich das in localStorage - siehe
      static/scripts/darkmode.js).
   Eine manuelle Wahl hat immer Vorrang vor der Systemeinstellung.
   ================================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gruen-50: #1A2E28;
        --gruen-100: #1C3327;
        --gruen-500: #4FB89E;
        --gruen-900: #86D6C2;

        --grau-100: #262C2F;
        --grau-700: #C7CDCA;

        --farbe-primaer: #2D8074;
        --farbe-primaer-hover: #379485;
        --farbe-primaer-aktiv: #48A797;
        --farbe-primaer-hell: rgba(79, 184, 158, 0.22);

        --farbe-seitenhintergrund: #14181A;
        --farbe-oberflaeche: #1D2225;
        --farbe-oberflaeche-dezent: #262C2F;
        --farbe-oberflaeche-hover: #2C3336;

        --farbe-text: #EDEFEE;
        --farbe-text-sekundaer: #A9B2AE;
        --farbe-text-dezent: #7C8682;

        --farbe-rahmen: #3A4448;
        --farbe-rahmen-stark: #4C575B;

        --farbe-link: #4FB89E;
        --farbe-link-hover: #6BC7B0;

        --erfolg: #6FCF97;
        --erfolg-hintergrund: #1C3327;

        --warnung: #E8B368;
        --warnung-hintergrund: #3A2E15;

        --fehler: #E88A8A;
        --fehler-hintergrund: #3A1E1E;
        --fehler-hover: #F2A3A3;

        --info: #7FB3D9;
        --info-hintergrund: #17293A;

        --schatten-klein: 0 1px 2px rgba(0, 0, 0, 0.35);
        --schatten-normal: 0 2px 6px rgba(0, 0, 0, 0.45);
        --schatten-gross: 0 8px 24px rgba(0, 0, 0, 0.55);
    }
}

:root[data-theme="dark"] {
    --gruen-50: #1A2E28;
    --gruen-100: #1C3327;
    --gruen-500: #4FB89E;
    --gruen-900: #86D6C2;

    --grau-100: #262C2F;
    --grau-700: #C7CDCA;

    --farbe-primaer: #2D8074;
    --farbe-primaer-hover: #379485;
    --farbe-primaer-aktiv: #48A797;
    --farbe-primaer-hell: rgba(79, 184, 158, 0.22);

    --farbe-seitenhintergrund: #14181A;
    --farbe-oberflaeche: #1D2225;
    --farbe-oberflaeche-dezent: #262C2F;
    --farbe-oberflaeche-hover: #2C3336;

    --farbe-text: #EDEFEE;
    --farbe-text-sekundaer: #A9B2AE;
    --farbe-text-dezent: #7C8682;

    --farbe-rahmen: #3A4448;
    --farbe-rahmen-stark: #4C575B;

    --farbe-link: #4FB89E;
    --farbe-link-hover: #6BC7B0;

    --erfolg: #6FCF97;
    --erfolg-hintergrund: #1C3327;

    --warnung: #E8B368;
    --warnung-hintergrund: #3A2E15;

    --fehler: #E88A8A;
    --fehler-hintergrund: #3A1E1E;
    --fehler-hover: #F2A3A3;

    --info: #7FB3D9;
    --info-hintergrund: #17293A;

    --schatten-klein: 0 1px 2px rgba(0, 0, 0, 0.35);
    --schatten-normal: 0 2px 6px rgba(0, 0, 0, 0.45);
    --schatten-gross: 0 8px 24px rgba(0, 0, 0, 0.55);
}