/*
 * DIWA-Designsystem – Tokens
 *
 * Erscheinungsbild der DIWA-Produktfamilie (DIWA Krefeld DIWA2 / DIWA Oberhausen): Roboto, Rot als
 * Markenfarbe (rote Fußleiste, Hauptaktionen, Kennzahl-Akzente), Blau für Links und aktive Navigation,
 * dunkles Blaugrau für Standardschaltflächen, weiße Karten auf hellgrauem Grund.
 * Werte nach docs/design/designsystem.md (aus der Oberhausener Vermessung, Kontraste geprüft).
 *
 * Mandanten-Branding überschreibt ausschließlich die --brand-*-Variablen (serverseitig berechnet und
 * auf Kontrast geprüft, Route /brand/<mandant>.css). Alle anderen Tokens leiten sich davon ab.
 */

:root {
    /* ---- Marke (Mandant) ------------------------------------------------------ */
    --brand-primary: #da121a;          /* DIWA-Rot: Fußleiste, Hauptaktion, Akzente – Weiß darauf 5,1:1 */
    --brand-primary-hover: #be1017;
    --brand-primary-dark: #ab0e14;     /* Schaltflächen in der Fußleiste, Fehlertext – Weiß 7,5:1 */
    --brand-primary-deep: #930c12;
    --brand-primary-soft: #fdecec;
    --brand-on-primary: #ffffff;
    --brand-accent: #3c57a7;           /* DIWA-Blau: Links, aktive Navigation, Symbole, Display-Aufruf */
    --brand-accent-dark: #2c4180;
    --brand-accent-soft: #e5e8f4;
    --brand-on-accent: #ffffff;

    /* ---- Abgeleitete Markenfarben ------------------------------------------- */
    --c-red: var(--brand-primary);
    --c-red-top: color-mix(in srgb, var(--brand-primary) 88%, #ff5a60);
    --c-red-bottom: color-mix(in srgb, var(--brand-primary) 88%, #000);
    --c-red-dark: var(--brand-primary-dark);
    --c-red-deep: var(--brand-primary-deep);
    --c-blue: var(--brand-accent);
    --c-blue-dark: var(--brand-accent-dark);
    --c-blue-light: var(--brand-accent-soft);

    /* ---- Standardschaltfläche (dunkles Blaugrau) ----------------------------- */
    --c-slate: #364a5e;
    --c-slate-top: #3f576e;
    --c-slate-bottom: #304254;
    --c-slate-hover-top: #455e78;
    --c-slate-hover-bottom: #2b3b4b;
    --c-slate-border: #23313e;
    --c-slate-shine: #72808e;

    /* ---- Text und Flächen ------------------------------------------------------ */
    --c-heading: #000000;
    --c-text: #545454;                 /* Fließtext: 7,4:1 auf Weiß, 6,8:1 auf #f5f5f5 (Alt #616161 auf #eee nur 5,1:1) */
    --c-text-strong: #242424;
    --c-muted: #566070;                /* Nebentext: ≥ 4,5:1 auf Weiß und allen grauen Flächen */
    --c-white: #ffffff;
    --c-page: #f5f5f5;                 /* Seitenhintergrund */
    --c-panel: #eeeeee;                /* graue Kopfleiste, graue Formularbox */
    --c-line: #e5e8ee;                 /* Trennlinien, Tabellen-Innenlinien */
    --c-border: #b2b9c4;               /* Eingabefelder, Tabellenrahmen */
    --c-border-strong: #a4acb9;
    --c-box-border: #dddddd;
    --c-row-alt: #f7f8fa;
    --c-row-hover: #eef1f8;

    /* ---- Status (Kundensteuerung) ------------------------------------------- */
    --c-success: #3da435;              /* wartet (grüner Punkt) – nur Symbolfarbe */
    --c-success-text: #1f6b1a;
    --c-success-bg: #ecfbef;
    --c-success-border: #9fdcb0;
    --c-info: #0069b3;                 /* aufgerufen (blaue Raute) */
    --c-info-bg: #e7f0f9;
    --c-warning: #e49700;              /* abgeschlossen (oranges Dreieck) */
    --c-warning-bg: #fff4dc;
    --c-warning-text: #6b4a00;
    --c-danger: #cc1719;               /* in Bearbeitung (rotes Quadrat), storniert */
    --c-danger-bg: #fdecec;
    --c-danger-text: #9c0e12;
    --c-focus: var(--brand-accent);

    /* ---- Schrift ---------------------------------------------------------------- */
    --font: "Roboto", Arial, Helvetica, "Noto Sans", "Segoe UI", sans-serif;
    --fs-base: 16px;
    --lh-base: 1.5625;
    --fs-small: 14px;
    --fs-tiny: 13px;
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-lead: 20px;

    /* ---- Maße ------------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --radius: 3px;
    --radius-lg: 6px;
    --shadow-header: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-pop: 0 6px 24px rgba(0, 0, 0, 0.16);
    --form-max: 940px;
    --topbar-h: 26px;
    --header-h: 72px;
    --sidebar-w: 264px;
    --content-pad: 32px;
    --footer-h: 50px;
    --target-min: 40px;
    --target-kiosk: 72px;
    --duration: 150ms;

    /* ---- Kompatibilität (frühere Token-Namen, nicht mehr neu verwenden) -------- */
    --ink: var(--c-text-strong);
    --ink-muted: var(--c-text);
    --ink-subtle: var(--c-muted);
    --paper: var(--c-page);
    --surface: var(--c-white);
    --surface-sunken: var(--c-panel);
    --line: var(--c-line);
    --line-strong: var(--c-border);
    --success-soft: var(--c-success-bg);
    --warning-soft: var(--c-warning-bg);
    --danger-soft: var(--c-danger-bg);
    --radius-sm: var(--radius);
    --radius-md: var(--radius);
    --text-sm: var(--fs-small);
    --text-md: var(--fs-base);
    --text-lg: 18px;
    --text-xl: var(--fs-h3);
    --text-2xl: var(--fs-h2);
    --text-3xl: var(--fs-h1);
    --text-xs: var(--fs-tiny);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-heavy: 700;
    --leading-tight: 1.3;
    --leading-normal: var(--lh-base);
    --border: 1px solid var(--c-line);
    --success: var(--c-success-text);
    --warning: var(--c-warning-text);
    --danger: var(--c-red-dark);
    --info: var(--c-blue);
    --info-soft: var(--c-info-bg);
    --shadow-raised: var(--shadow-card);
    --shadow-overlay: var(--shadow-pop);
    --measure: 75ch;
    --focus-outer: var(--c-focus);
    --focus-inner: #ffffff;

    color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration: 0ms;
    }
}