/* ==========================================================================
   DGD Design Tokens — einzige Token-Quelle (#1469, Entscheidung #777, 29.09.2026)

   Architektur: Palette -> Rolle. Hexwerte stehen NUR hier, und nur in der
   Palette. Rollen (von Komponenten benutzte Namen wie --dgd-primary) zeigen
   per var(...) auf einen Palette-Eintrag. css/theme.css und
   dashboard/css/theme.css enthalten seitdem keinen Hexwert mehr — jede Regel
   dort liest ausschliesslich var(--dgd-*).

   Zusammengefuehrt aus css/theme.css (Website) und dashboard/css/theme.css
   (Dashboard). Kommentare zu einzelnen Werten (z. B. --dgd-gold-text) sind
   mitgewandert. Bestehende Variablennamen wurden NICHT entfernt (siehe
   "backwards-compatible aliases — NEVER remove" unten) — nur ihre Herkunft
   ist jetzt eine einzige Datei statt zwei.

   Reihenfolge der Bloecke ist absichtlich: :root (Palette, Rollen) dann
   [data-dgd-oberflaeche="dashboard"] (bewusste Oberflaechen-Abweichungen)
   dann [data-theme="dark"]. Alle drei Selektoren haben dieselbe Spezifitaet
   (0,1,0) — bei gleicher Spezifitaet gewinnt die spaeter stehende Regel.
   Der Dark-Block steht deshalb ZULETZT: sitzt data-theme="dark" zusammen mit
   data-dgd-oberflaeche="dashboard" auf <html>, gewinnt fuer jede Property,
   die der Dark-Block selbst setzt (z. B. --dgd-text-muted), der Dark-Wert;
   fuer alles, was der Dark-Block nicht anfasst (z. B. --dgd-font-family),
   bleibt die Oberflaechen-Abweichung wirksam.

   PFLEGE (aus #777): Aenderungen an dieser Datei und an der Ausnahmeliste in
   dashboard/tests/test_design_tokens.php nur per PR mit Review aus der
   Abteilung Softwareentwicklung. Die Ausnahmeliste darf nur schrumpfen.
   Jede Token-Aenderung erhoeht das Cache-Busting aller Einstiege, die
   tokens.css laden (aktuell: index.html, dashboard/index.html).

   Waechter: dashboard/tests/test_design_tokens.php
   ========================================================================== */

:root {
    /* ======================================================================
       PALETTE — rohe Werte. Nur hier duerfen Hexwerte stehen.
       ====================================================================== */

    /* --- Blau / Navy --- */
    --dgd-navy: #1a3a5c;            /* Dunkelblau — structure. Bewusst unveraendert (zero visual drift). */
    --dgd-navy-light: #2a4a7f;
    --dgd-navy-dark: #0f2440;
    --dgd-navy-hero: #1a4a7a;       /* distinktes Blau fuer das Ende des Hero-Gradients */
    --dgd-blue-mid: #2c5282;        /* distinktes Mittelblau (Hero-Gradient, primary-light) — kein Alias von navy-light */
    --dgd-blue: #2980b9;
    --dgd-blue-light: #3498db;
    --dgd-blue-dark: #1f6fa0;

    /* --- Gold --- */
    --dgd-gold: #D4A843;            /* Gold — the trust accent: badge borders, stars, active nav, stat numbers */
    --dgd-gold-light: #e0bd6a;
    --dgd-gold-dark: #b8912e;
    --dgd-gold-text: #9a7420;       /* AA-safe gold for TEXT on white (raw #D4A843 ~2:1 fails AA) */

    /* --- Gruen --- */
    --dgd-green: #27ae60;           /* GREEN = success / "Versicherung zahlt" semantics ONLY */
    --dgd-green-light: #2ecc71;
    --dgd-green-dark: #1e8449;

    /* --- Weitere Semantik-Basisfarben --- */
    --dgd-orange: #f39c12;
    --dgd-red: #e74c3c;
    --dgd-red-dark: #c0392b;        /* AA-taugliche Rot-TEXTfarbe auf hellem Grund (Fristen, Trends) */
    --dgd-ochre: #b7950b;           /* dunkles Gelb fuer Warn-TEXT auf hellem Grund (rohes --dgd-orange ist zu hell) */
    --dgd-amber-400: #fbbf24;       /* heller Amber-Ton fuer Hinweis-TEXT auf DUNKLEM Grund */
    --dgd-amber-500: #f59e0b;       /* Amber fuer Fokusrahmen an Warn-Elementen (PM-System) */
    --dgd-amber-700: #b45309;       /* dunkler Amber fuer Hinweis-TEXT auf hellem Grund, ~5:1 (WCAG AA) */

    /* --- Neutrale Skala --- */
    --dgd-white: #ffffff;
    --dgd-gray-50: #f8f9fa;
    --dgd-gray-100: #f1f3f5;
    --dgd-gray-200: #e9ecef;
    --dgd-gray-300: #dee2e6;
    --dgd-gray-400: #ced4da;
    --dgd-gray-500: #adb5bd;
    --dgd-gray-600: #6c757d;        /* Grundwert (Website). Dashboard weicht bewusst ab, siehe Oberflaechen-Abweichungen. */
    --dgd-slate-600: #555e68;       /* Dashboard-Abweichung von --dgd-gray-600: bewusster WCAG-AA-Fix (CLAUDE.md) */
    --dgd-gray-700: #495057;
    --dgd-gray-800: #343a40;
    --dgd-gray-900: #212529;
    --dgd-slate-300: #cbd5e1;       /* Blaugrau hell (PM-System: Avatar-Ueberlauf "+N") */
    --dgd-slate-400: #94a3b8;       /* Blaugrau (PM-System: Nebenzustaendige, Projekt ohne Farbe).
                                       Gleicher Wert wie --dgd-dark-slate-400, aber Hellmodus-Palette:
                                       wird im Dark-Block NICHT umgebogen. */
    --dgd-black: #000000;

    /* --- Dark-Mode-Palette (Dashboard) --- */
    --dgd-dark-slate-900: #0f172a;
    --dgd-dark-slate-800: #1e293b;
    --dgd-dark-navy-950: #0c1524;
    --dgd-dark-slate-200: #e2e8f0;
    --dgd-dark-slate-400: #94a3b8;
    --dgd-dark-slate-425: #8494a7;
    --dgd-dark-slate-700: #334155;
    --dgd-dark-slate-600: #475569;
    --dgd-dark-slate-500: #64748b;
    --dgd-dark-slate-100: #f1f5f9;
    --dgd-dark-slate-50: #f8fafc;
    --dgd-dark-sky-300: #93c5fd;
    --dgd-dark-sky-400: #60a5fa;
    --dgd-dark-sky-500: #3b82f6;
    --dgd-dark-red-400: #f87171;    /* Rot-TEXT auf dunklem Grund (Gegenstueck zu --dgd-red-dark) */

    /* ======================================================================
       ROLLEN — zeigen per var(...) auf die Palette. Keine Komponenten-Token.
       ====================================================================== */

    /* Brand Colors (backwards-compatible aliases — NEVER remove) */
    --dgd-primary: var(--dgd-navy);
    --dgd-primary-light: var(--dgd-blue-mid);   /* distinct mid-blue used in hero gradient — kept */
    --dgd-primary-dark: var(--dgd-navy-dark);
    --dgd-secondary: var(--dgd-blue);
    --dgd-secondary-light: var(--dgd-blue-light);
    --dgd-secondary-dark: var(--dgd-blue-dark);
    --dgd-accent: var(--dgd-green);
    --dgd-accent-light: var(--dgd-green-light);
    --dgd-accent-dark: var(--dgd-green-dark);

    /* Semantic Colors */
    --dgd-success: var(--dgd-green);
    --dgd-warning: var(--dgd-orange);
    --dgd-danger: var(--dgd-red);
    --dgd-info: var(--dgd-blue);

    /* Semantic (themeable) layer — der Dark-Mode-Angriffspunkt.
       Komponenten sollen diese fuer Flaechen/Text/Rahmen lesen. */
    --dgd-surface: var(--dgd-white);
    --dgd-surface-2: var(--dgd-gray-50);
    --dgd-text: var(--dgd-gray-900);
    --dgd-text-muted: var(--dgd-gray-600);
    --dgd-border: var(--dgd-gray-200);
    --dgd-hero-from: var(--dgd-navy);
    --dgd-hero-to: var(--dgd-navy-hero);

    /* Dashboard-spezifische Rollen (nur diese Oberflaeche nutzt sie derzeit) */
    --dgd-bg: var(--dgd-white);
    --dgd-bg-alt: var(--dgd-gray-50);
    --dgd-bg-card: var(--dgd-white);
    --dgd-bg-sidebar: var(--dgd-primary);
    --dgd-text-secondary: var(--dgd-gray-600);
    --dgd-input-bg: var(--dgd-white);
    --dgd-input-border: var(--dgd-gray-300);
    --dgd-hover-bg: var(--dgd-gray-100);

    /* Text- und Akzentrollen aus dem PM-System (PR #833). Semantisch benannt,
       damit Fristen, Trends und Hinweise anderswo dieselben Rollen lesen
       koennen; die gleichen Festwerte stehen in dashboard.css noch an aelteren
       Stellen (.dgd-badge--geplant, .dgd-kpi-card__trend--down). */
    --dgd-warning-text: var(--dgd-ochre);
    --dgd-danger-text: var(--dgd-red-dark);
    --dgd-attention-text: var(--dgd-amber-700);   /* Hinweis "weicht ab" — staerker als Warn-Gelb */
    --dgd-focus-warning: var(--dgd-amber-500);
    --dgd-neutral-accent: var(--dgd-slate-400);
    --dgd-neutral-accent-soft: var(--dgd-slate-300);
    /* Gedaempfter Sidebar-Text. Bewusst Weiss mit Deckkraft statt --dgd-white:
       die Sidebar ist in BEIDEN Modi dunkel, --dgd-white wird im Dark-Block
       aber zu dunklem Schiefer umgebogen (Text waere unsichtbar). */
    --dgd-sidebar-text-dim: rgba(255, 255, 255, 0.5);
    --dgd-sidebar-text-dim-hover: rgba(255, 255, 255, 0.75);

    /* ======================================================================
       Typography, Spacing, Radius, Shadow, Transitions, Layout
       (unveraendert aus beiden Dateien zusammengefuehrt)
       ====================================================================== */

    --dgd-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --dgd-font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono',
        'Courier New', monospace;
    --dgd-font-size-xs: 0.8125rem;
    --dgd-font-size-sm: 0.9375rem;
    --dgd-font-size-base: 1.0625rem;
    --dgd-font-size-lg: 1.1875rem;
    --dgd-font-size-xl: 1.375rem;
    --dgd-font-size-2xl: 1.625rem;
    --dgd-font-size-3xl: 2.125rem;
    --dgd-font-size-4xl: 2.75rem;
    --dgd-font-size-5xl: 3.25rem;
    --dgd-font-weight-normal: 400;
    --dgd-font-weight-medium: 500;
    --dgd-font-weight-semibold: 600;
    --dgd-font-weight-bold: 700;
    --dgd-line-height: 1.6;

    --dgd-space-xs: 0.25rem;
    --dgd-space-sm: 0.5rem;
    --dgd-space-md: 1rem;
    --dgd-space-lg: 1.5rem;
    --dgd-space-xl: 2rem;
    --dgd-space-2xl: 3rem;
    --dgd-space-3xl: 4rem;
    --dgd-space-4xl: 5rem;
    --dgd-space-5xl: 6rem;

    --dgd-radius-sm: 4px;
    --dgd-radius-md: 8px;
    --dgd-radius-lg: 12px;
    --dgd-radius-xl: 16px;
    --dgd-radius-full: 9999px;

    --dgd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --dgd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --dgd-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
    --dgd-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);

    --dgd-transition-fast: 150ms ease;
    --dgd-transition-base: 250ms ease;
    --dgd-transition-slow: 350ms ease;

    --dgd-max-width: 1200px;
    --dgd-header-height: 64px;
}

/* ==========================================================================
   Oberflaechen-Abweichungen (bewusst, bis zur Angleichung)

   Drei Rollen sehen im Dashboard bewusst anders aus als auf der Website
   (Entscheidung 29.09.2026, #1469/#777 — Angleichung ist eine spaetere
   Design-Entscheidung, hier NICHT vorweggenommen):
     - --dgd-gray-600 / --dgd-text-muted: WCAG-AA-Fix im Dashboard (CLAUDE.md)
     - --dgd-font-family: Dashboard laedt Inter von Google Fonts, Website nicht
   ========================================================================== */

[data-dgd-oberflaeche="dashboard"] {
    --dgd-gray-600: var(--dgd-slate-600);
    --dgd-text-muted: var(--dgd-gray-500);
    --dgd-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* ==========================================================================
   Dark Mode (zentral) — vorher [data-theme="dark"] in dashboard/css/theme.css.
   Website setzt data-theme nie (siehe sidebar.js), ist also unveraendert.
   ========================================================================== */

[data-theme="dark"] {
    --dgd-bg: var(--dgd-dark-slate-900);
    --dgd-bg-alt: var(--dgd-dark-slate-800);
    --dgd-bg-card: var(--dgd-dark-slate-800);
    --dgd-bg-sidebar: var(--dgd-dark-navy-950);
    --dgd-text: var(--dgd-dark-slate-200);
    --dgd-text-secondary: var(--dgd-dark-slate-400);
    --dgd-text-muted: var(--dgd-dark-slate-425);
    --dgd-border: var(--dgd-dark-slate-700);
    --dgd-input-bg: var(--dgd-dark-slate-800);
    --dgd-input-border: var(--dgd-dark-slate-600);
    --dgd-hover-bg: var(--dgd-dark-slate-700);

    --dgd-white: var(--dgd-dark-slate-800);
    --dgd-gray-50: var(--dgd-dark-slate-800);
    --dgd-gray-100: var(--dgd-dark-slate-700);
    --dgd-gray-200: var(--dgd-dark-slate-600);
    --dgd-gray-300: var(--dgd-dark-slate-500);
    --dgd-gray-800: var(--dgd-dark-slate-200);
    --dgd-gray-900: var(--dgd-dark-slate-100);
    --dgd-black: var(--dgd-dark-slate-50);

    --dgd-primary: var(--dgd-dark-sky-300);
    --dgd-primary-light: var(--dgd-dark-sky-400);
    --dgd-primary-dark: var(--dgd-dark-sky-500);
    --dgd-warning-text: var(--dgd-amber-400);
    --dgd-danger-text: var(--dgd-dark-red-400);
    --dgd-attention-text: var(--dgd-amber-400);
    --dgd-neutral-accent-soft: var(--dgd-dark-slate-600);

    --dgd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --dgd-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --dgd-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}