/*
 * Design Tokens. Fünf Designs, die jeder Benutzer unter "Mein Konto" wählt:
 *   petrol (Grundlage in :root, Standard für neue Benutzer), marine, kontrast, cockpit, leitstand
 * Das Layout setzt <html data-design="...">. Farben, Schrift und Formen stehen hier;
 * Cockpit und Leitstand verändern zusätzlich den Aufbau, siehe designs.css.
 * Ein weiteres Design braucht einen Block hier und einen Eintrag in app/Domain/Design.php.
 */

/* Gemeinsame Werte und Design "Petrol": hell und weich, runde Formen */
:root {
    --farbe-grund: #f4f7f7;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-2: #eaf0f0;
    --farbe-linie: #dce5e6;
    --farbe-text: #12262a;
    --farbe-text-gedaempft: #5a6e72;

    --farbe-kopf: #ffffff;
    --farbe-kopf-text: #0e3b43;
    --kopf-linie: 1px solid #dce5e6;
    --kopf-feld-rand: #b9c9cb;

    --farbe-akzent: #0f6b78;
    --farbe-akzent-dunkel: #0b5560;
    --farbe-akzent-text: #ffffff;
    --farbe-gut: #0b5a44;
    --farbe-gut-flaeche: #ddf3ec;
    --farbe-warnung: #7a4b00;
    --farbe-warnung-flaeche: #fdf1d8;
    --farbe-fehler: #b3261e;
    --farbe-fehler-flaeche: #fbe9e7;
    --farbe-aus: #5a6e72;
    --farbe-aus-flaeche: #e6eded;

    /* Schrift: nur Systemschriften, nichts wird von fremden Servern geladen */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-kopf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --schrift-klein: 0.875rem;
    --schrift-normal: 1rem;
    --schrift-gross: 1.25rem;
    --schrift-titel: 1.625rem;
    --schrift-gewicht-fett: 650;
    --schrift-gewicht-titel: 650;
    --titel-abstand: 0;

    /* Kleine Beschriftungen (Tabellenköpfe, Kachelnamen) */
    --etikett-schreibweise: none;
    --etikett-sperrung: 0;
    --etikett-groesse: 0.875rem;

    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;

    --radius: 14px;
    --radius-klein: 10px;
    --radius-knopf: 999px;
    --radius-marke: 999px;
    --schatten: 0 1px 3px rgba(14, 59, 67, 0.08);
    --karte-linie-oben: 1px solid #dce5e6;
    --titel-linie: 0;

    /* Bedienelemente: groß genug für Tablet und Handschuh */
    --bedien-hoehe: 3rem;
    --bedien-hoehe-klein: 2.25rem;
    --inhalt-breite: 72rem;
    --inhalt-breite-schmal: 30rem;
}

/* Design "Marine": Anthrazit mit Ziegelrot, klassisch */
:root[data-design="marine"] {
    --farbe-grund: #f0f1f2;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-2: #f5f6f7;
    --farbe-linie: #d2d5d9;
    --farbe-text: #22262a;
    --farbe-text-gedaempft: #555b61;

    --farbe-kopf: #2b2f33;
    --farbe-kopf-text: #ffffff;
    --kopf-linie: 3px solid #c2412d;
    --kopf-feld-rand: transparent;

    --farbe-akzent: #c2412d;
    --farbe-akzent-dunkel: #a3351f;
    --farbe-akzent-text: #ffffff;
    --farbe-gut: #1d6b3e;
    --farbe-gut-flaeche: #e3f2e8;
    --farbe-aus: #555b61;
    --farbe-aus-flaeche: #e6e8ea;

    --radius: 8px;
    --radius-klein: 6px;
    --radius-knopf: 8px;
    --radius-marke: 6px;
    --schatten: none;
    --karte-linie-oben: 1px solid #d2d5d9;
}

/* Design "Kontrast": Schwarz auf Weiß, größere Schrift und Bedienelemente, für helle Umgebung und schwächere Augen */
:root[data-design="kontrast"] {
    --farbe-grund: #ffffff;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-2: #ededed;
    --farbe-linie: #000000;
    --farbe-text: #000000;
    --farbe-text-gedaempft: #2b2b2b;

    --farbe-kopf: #000000;
    --farbe-kopf-text: #ffffff;
    --kopf-linie: 0;
    --kopf-feld-rand: #ffffff;

    --farbe-akzent: #0047b3;
    --farbe-akzent-dunkel: #00337f;
    --farbe-akzent-text: #ffffff;
    --farbe-gut: #0a5a2a;
    --farbe-gut-flaeche: #dff0e4;
    --farbe-warnung: #5c3a00;
    --farbe-warnung-flaeche: #ffe9b3;
    --farbe-fehler: #a00000;
    --farbe-fehler-flaeche: #ffe0e0;
    --farbe-aus: #2b2b2b;
    --farbe-aus-flaeche: #e0e0e0;

    --schrift-klein: 1rem;
    --schrift-normal: 1.125rem;
    --schrift-gross: 1.375rem;
    --schrift-titel: 1.875rem;
    --schrift-gewicht-fett: 700;
    --schrift-gewicht-titel: 700;
    --etikett-groesse: 0.9375rem;

    --radius: 4px;
    --radius-klein: 4px;
    --radius-knopf: 4px;
    --radius-marke: 4px;
    --schatten: none;
    --karte-linie-oben: 2px solid #000000;

    --bedien-hoehe: 3.25rem;
    --bedien-hoehe-klein: 2.5rem;
}

/* Design "Cockpit": hell, kompakt, Seitenleiste links (Aufbau in designs.css) */
:root[data-design="cockpit"] {
    --farbe-grund: #f7f8fa;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-2: #f2f4f7;
    --farbe-linie: #e3e7ec;
    --farbe-text: #1f2933;
    --farbe-text-gedaempft: #6b7785;

    --farbe-kopf: #ffffff;
    --farbe-kopf-text: #1f2933;
    --kopf-linie: 1px solid #e3e7ec;
    --kopf-feld-rand: #cfd6de;

    --farbe-akzent: #2563eb;
    --farbe-akzent-dunkel: #1d4ed8;
    --farbe-akzent-text: #ffffff;
    --farbe-gut: #16794c;
    --farbe-gut-flaeche: #e3f4ec;
    --farbe-aus: #6b7785;
    --farbe-aus-flaeche: #eef1f4;

    --schrift-klein: 0.8125rem;
    --schrift-normal: 0.9375rem;
    --schrift-gross: 1.125rem;
    --schrift-titel: 1.375rem;
    --etikett-schreibweise: uppercase;
    --etikett-sperrung: 0.04em;
    --etikett-groesse: 0.75rem;

    --abstand-4: 0.875rem;
    --abstand-5: 1.25rem;

    --radius: 8px;
    --radius-klein: 6px;
    --radius-knopf: 6px;
    --radius-marke: 999px;
    --schatten: none;
    --karte-linie-oben: 1px solid #e3e7ec;

    --bedien-hoehe: 2.5rem;
    --bedien-hoehe-klein: 2rem;

    /* Seitenleiste */
    --leiste: #1f2933;
    --leiste-text: #c9d2dc;
    --leiste-breite: 14rem;
}

/* Design "Leitstand": dunkle Anzeigetafel. Nur am Bildschirm, gedruckt wird immer hell. */
@media screen {
    :root[data-design="leitstand"] {
        color-scheme: dark;
        --farbe-grund: #0b0d0f;
        --farbe-flaeche: #131619;
        --farbe-flaeche-2: #1c1f23;
        --farbe-linie: #2a2f35;
        --farbe-text: #f2f2f0;
        --farbe-text-gedaempft: #8a939c;

        --farbe-kopf: #0b0d0f;
        --farbe-kopf-text: #ffc233;
        --kopf-linie: 2px solid #ffc233;
        --kopf-feld-rand: #2a2f35;

        --farbe-akzent: #ffc233;
        --farbe-akzent-dunkel: #e6a91a;
        --farbe-akzent-text: #1a1300;
        --farbe-gut: #5bd38a;
        --farbe-gut-flaeche: #12301f;
        --farbe-warnung: #ffd98a;
        --farbe-warnung-flaeche: #3a2c0c;
        --farbe-fehler: #ff6b5e;
        --farbe-fehler-flaeche: #3a1513;
        --farbe-aus: #8a939c;
        --farbe-aus-flaeche: #1c1f23;

        --schrift: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --schrift-kopf: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
        --schrift-gewicht-titel: 700;
        --titel-abstand: 0.06em;
        --etikett-schreibweise: uppercase;
        --etikett-sperrung: 0.1em;
        --etikett-groesse: 0.75rem;

        --radius: 2px;
        --radius-klein: 2px;
        --radius-knopf: 2px;
        --radius-marke: 2px;
        --schatten: none;
        --karte-linie-oben: 1px solid #2a2f35;

        --leitstand-link: #7fb4ff;
    }
}

/* Farbproben für die Design-Auswahl unter "Mein Konto" (feste Werte, unabhängig vom aktiven Design) */
.designprobe { display: flex; height: 1.5rem; margin-bottom: var(--abstand-2); border: 1px solid var(--farbe-linie); border-radius: var(--radius-klein); overflow: hidden; }
.designprobe i { flex: 1; }
.designprobe--petrol i:nth-child(1) { background: #ffffff; }
.designprobe--petrol i:nth-child(2) { background: #f4f7f7; }
.designprobe--petrol i:nth-child(3) { background: #0f6b78; }
.designprobe--marine i:nth-child(1) { background: #2b2f33; }
.designprobe--marine i:nth-child(2) { background: #f0f1f2; }
.designprobe--marine i:nth-child(3) { background: #c2412d; }
.designprobe--kontrast i:nth-child(1) { background: #000000; }
.designprobe--kontrast i:nth-child(2) { background: #ffffff; }
.designprobe--kontrast i:nth-child(3) { background: #0047b3; }
.designprobe--cockpit i:nth-child(1) { background: #1f2933; }
.designprobe--cockpit i:nth-child(2) { background: #f7f8fa; }
.designprobe--cockpit i:nth-child(3) { background: #2563eb; }
.designprobe--leitstand i:nth-child(1) { background: #0b0d0f; }
.designprobe--leitstand i:nth-child(2) { background: #1c1f23; }
.designprobe--leitstand i:nth-child(3) { background: #ffc233; }