/* ===========================================================================
   Design-Tokens – §18 des Anforderungsdokuments.
   Übernommen aus dem Schaltungs-Planer (app/css/style.css), damit beide
   Werkzeuge als eine Produktfamilie wirken. Die Variablennamen aus §18 sind
   verbindlich; die kurzen Namen darunter sind Aliasse, mit denen die Mockups
   (mockups/index.html) geschrieben sind – so bleibt beides gültig.

   §17.11: Ausschließlich diese Tokens verwenden. Keine eigenen Farben, keine
   eigenen Schriften.
   =========================================================================== */

:root {
    /* Sagt dem Browser, in welcher Helligkeit er seine **eigenen** Bauteile
       malen soll: die aufgeklappte Liste eines <select>, Rollbalken,
       Ankreuzkästchen, Datumswähler. Die lassen sich mit CSS nicht einfärben.
       Ohne diese Zeile bleibt all das hell, auch wenn die Anwendung dunkel
       ist - eine weiße Auswahlliste vor dunkler Oberfläche. */
    color-scheme: light;

    /* --- §18: Flächen und Text --- */
    --bg-app: #e4e8f2;          /* Seitenhintergrund */
    --bg-canvas: #eef1f8;       /* Arbeitsfläche (Plan), Eingabefelder */
    --bg-panel: #ffffff;        /* Karten, Seitenleisten, Tabellen */
    --text-main: #1b2440;
    --text-muted: #6b7590;
    --border: #d7dcea;

    /* --- §18: Topbar --- */
    --header-bg: #122048;
    --header-bg-2: #0d1836;
    --header-sub: #b7c0dd;
    --header-btn: #1c2c5c;
    --header-btn-border: #2b3d75;
    --header-btn-hover: #25397a;

    /* --- §18: Akzent --- */
    --accent: #e8940c;          /* aktives Werkzeug, Highlight, Unterschrift */
    --accent-contrast: #1b2440;
    --accent-soft: #fff3df;
    --blue: #2f6fed;            /* accent-color für Checkboxen/Slider */

    /* --- §18: Statusfarben (fachlich) --- */
    --status-none: #b8bec7;         /* ohne Auftrag */
    --status-planned: #2f6fed;      /* geplant */
    --status-in-progress: #e8940c;  /* in Arbeit */
    --status-done: #22a06b;         /* abgenommen */
    --status-problem: #d93a3f;      /* Problem / Schaden */

    /* --- §18: Sonstiges --- */
    --grid-dot: #c7cee3;        /* Punktraster der Arbeitsfläche, 20 px */
    --shadow: 0 2px 10px rgba(20, 30, 60, .08);
    --radius: 10px;

    /* --- Rückmeldungsfarben, aus den Statusfarben abgeleitet --- */
    --danger-bg: #fff0f0;
    --danger-border: #f3b6b8;
    --danger-text: #b3262b;
    --success-bg: #e3f6ea;
    --success-text: #1a6b43;
    --warn-bg: #fff8e1;
    --warn-border: #f2d27a;
    --warn-text: #7a4a00;

    /* --- Aliasse: so heißen die Tokens in mockups/index.html --- */
    --bg: var(--bg-app);
    --panel: var(--bg-panel);
    --line: var(--border);
    --text: var(--text-main);
    --muted: var(--text-muted);
    --s-none: var(--status-none);
    --s-planned: var(--status-planned);
    --s-progress: var(--status-in-progress);
    --s-done: var(--status-done);
    --s-problem: var(--status-problem);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-app: #0a1226;
    --bg-canvas: #0e1730;
    --bg-panel: #141f3d;
    --text-main: #e7ebf7;
    --text-muted: #93a0c4;
    --border: #26335c;

    --header-bg: #0a1230;
    --header-bg-2: #070c1e;
    --header-btn: #182446;
    --header-btn-border: #31406e;
    --header-btn-hover: #1c2a52;

    --accent-soft: #3a2a10;
    --grid-dot: #26335c;
    --shadow: 0 2px 14px rgba(0, 0, 0, .4);

    --danger-bg: #3a1416;
    --danger-border: #7a2a2e;
    --danger-text: #ff9a9e;
    --success-bg: #113325;
    --success-text: #6ee7b7;
    --warn-bg: #33280d;
    --warn-border: #6b551d;
    --warn-text: #f4c86a;
}