/* =============================================================================
   Design-Tokens der FF Gemeinde Bischoffen
   -----------------------------------------------------------------------------
   Zentrale Quelle: www/shared/css/tokens.css
   NICHT in den Modulordnern bearbeiten - die Kopien dort werden von
   tools/sync-shared.ps1 ueberschrieben.

   Farbrollen statt Einzelfarben: "Aktion" ist immer dasselbe Blau, egal ob
   Fahrtenbuch oder Atemschutz. Rot bleibt Warn- und Loeschfarbe, damit es im
   Einsatz Signalwirkung behaelt.
   ========================================================================== */

:root {
    /* --- Rollen ---------------------------------------------------------- */
    --c-action: #0b5ed7;
    --c-action-hover: #0a53be;
    --c-action-soft: #e7effc;

    --c-success: #157a3c;
    --c-success-hover: #11642f;
    --c-success-soft: #f2f9f5;

    --c-warning: #a86b00;
    --c-warning-hover: #8a5800;
    --c-warning-soft: #fdf8ee;

    --c-danger: #b42318;
    --c-danger-hover: #941c13;
    --c-danger-soft: #fdf3f2;

    /* Schriftfarbe AUF einer Rollenflaeche. Im hellen Design sind die Flaechen
       kraeftig, im dunklen hell - die Schrift muss also mitwechseln. */
    --c-on-action: #ffffff;
    --c-on-success: #ffffff;
    --c-on-warning: #ffffff;
    --c-on-danger: #ffffff;

    /* --- Flaechen und Text ----------------------------------------------- */
    --c-page: #f4f4f9;
    --c-card: #ffffff;
    --c-card-alt: #f7f8fa;
    --c-text: #1f2328;
    --c-text-muted: #5f6368;
    --c-border: #d9dde2;
    --c-border-strong: #c9ced6;

    /* --- Status (Ablauf, Prioritaet) ------------------------------------- */
    /* Werden von Modulen mit eigener Farbverwaltung ueberschrieben, z. B. AGT. */
    --status-expired: #b42318;
    --status-expired-bg: #fdf3f2;
    --status-soon: #a86b00;
    --status-soon-bg: #fdf8ee;
    --status-ok: #157a3c;
    --status-ok-bg: #f2f9f5;

    /* --- Typografie ------------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* 16px auf Eingabefeldern verhindert das Auto-Zoomen von iOS. */
    --font-size-input: 16px;
    --font-size-small: 0.9rem;

    /* --- Masse ------------------------------------------------------------ */
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 2px 6px rgba(0, 0, 0, .09);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, .16);

    /* Mindestgroesse fuer Bedienelemente, damit sie mit dem Finger sicher
       getroffen werden. */
    --tap: 48px;
    --tap-small: 44px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Breite der Inhaltsspalte */
    --content-width: 820px;
}

/* =============================================================================
   Dunkles Design
   Greift automatisch, wenn das Geraet auf "dunkel" steht - nachts im Einsatz
   deutlich angenehmer als eine weisse Seite.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --c-action: #6ea8fe;
        --c-action-hover: #8bb9fe;
        --c-action-soft: #17233a;

        --c-success: #63c98a;
        --c-success-hover: #7fd6a0;
        --c-success-soft: #16281d;

        --c-warning: #e0a94a;
        --c-warning-hover: #edc06e;
        --c-warning-soft: #2a2313;

        --c-danger: #f2837a;
        --c-danger-hover: #f59f98;
        --c-danger-soft: #2d1917;

        /* Die Flaechen sind hier hell - darauf gehoert dunkle Schrift. */
        --c-on-action: #0b1220;
        --c-on-success: #0c2113;
        --c-on-warning: #241a05;
        --c-on-danger: #2a0f0c;

        --c-page: #15181c;
        --c-card: #1e2227;
        --c-card-alt: #262b31;
        --c-text: #e6e8ea;
        --c-text-muted: #a3a9b0;
        --c-border: #333a42;
        --c-border-strong: #454d57;

        --status-expired: #f2837a;
        --status-expired-bg: #2d1917;
        --status-soon: #e0a94a;
        --status-soon-bg: #2a2313;
        --status-ok: #63c98a;
        --status-ok-bg: #16281d;

        --shadow: 0 2px 6px rgba(0, 0, 0, .5);
        --shadow-lg: 0 8px 20px rgba(0, 0, 0, .6);
    }
}