/* Sunnyware — Farben und Schrift für alle Web-Oberflächen.
   Quelle der Wahrheit: _Branding/README.md. Diese Datei nicht je Projekt
   kopieren und dann getrennt pflegen — einbinden (siehe README, Abschnitt
   „Einbindung je Client"). Die XAML-Entsprechung für die MAUI-App liegt
   daneben in tokens.xaml, beide müssen dieselben Werte tragen. Die
   Schriftdateien selbst bindet fonts/schriften.css ein. */

:root {
    /* ---- Markenfarben ------------------------------------------------
       Exakt aus dem SunnyLogger-Bildzeichen entnommen: die Sonne ist
       #F28914, das Solarpanel #0494DC. netLogger übernimmt beide Werte
       und belegt sie neu: Blau = Netz und Daten, Orange = genau ein
       Element, nämlich das Gerät selbst. */
    --brand-orange: #f28914;
    --brand-blue: #0494dc;

    /* Abgedunkelte Fassung für helle Untergründe, Papier und Typenschild.
       Die Originaltöne erreichen auf Weiß zu wenig Kontrast (Orange 2,5:1,
       Blau 3,3:1 — der Mindestwert für grafische Elemente und große Schrift
       liegt bei 3:1, für Fließtext bei 4,5:1). */
    --brand-orange-hell: #c96f0a;   /* 3,6:1 auf Weiß — Grafik und Schrift ab 24 px */
    --brand-blue-hell: #02699b;     /* 6,0:1 auf Weiß — auch für Fließtext */

    /* ---- Oberfläche: dunkles Technik-Panel --------------------------- */
    --bg: #0f172a;
    --panel: #1e293b;
    --panel-edge: #334155;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --accent: #f59e0b;
    --auf-akzent: #1c1400;          /* Text auf der Akzentfläche (Hauptknopf, gewählter Tag) */

    /* ---- Status ------------------------------------------------------ */
    --ok: #10b981;
    --achtung: #eab308;
    --warn: #ef4444;
    --nap: #38bdf8;

    /* ---- Fachfarben (Dashboards.md §4.5, §13.9) -----------------------
       Nach Geräteart und Richtung: Erzeugung gelb, Verbrauch blau, Bezug
       rot, Einspeisung grün (Alt-Client), Laden kräftig und Entladen hell
       in Orange (entschieden 24.09.2026), Ladezustand violett. Geprüft mit
       dem Palette-Validator gegen #1e293b (25.09.2026, README „Fachfarben"):
       Kontrast 3,1–9,6:1. Bezug karminrot seit W13a (26.09.2026): neben
       Einspeisung und Entladen bei Farbfehlsichtigkeit jetzt ≥ 17,6, neben
       Laden bleibt es knapp (10,8) — die beiden stehen in keinem Stapel
       nebeneinander (Laden wächst nach unten), dort trennen Lage und Wort. */
    --f-erzeugung: #facc15;
    --f-verbrauch: #38bdf8;
    --f-bezug: #e11d48;
    --f-einspeisung: #34d399;
    --f-laden: #ea580c;
    --f-entladen: #fb923c;
    --f-soc: #8b5cf6;

    /* ---- Schrift (README „Schrift") -----------------------------------
       Drei Familien, entschieden am 25.09.2026 als Standard der Familie.
       Die Schriftdateien bindet fonts/schriften.css ein (Ordner fonts/
       neben dieser Datei); ohne sie greift die Ersatzkette dahinter.
       Barlow Semi Condensed: Überschriften, Zahlen, Etiketten, Wortmarke.
       Source Sans 3: Text, Formulare, Knöpfe. JetBrains Mono: Code,
       Punktadressen, Seriennummern. Ersatz der Display-Schrift ist Segoe UI,
       nicht Arial Narrow wie im Vorbild: eine Seite ohne schriften.css zeigt
       ihre Wortmarke dann so wie vor der Umstellung. */
    --font-display: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
    --font-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Gewichte — nur, was als Datei vorliegt: Barlow 500/600/700,
       Source Sans 400/600 (400 auch kursiv), JetBrains Mono 400/500. Ein
       anderes Gewicht nimmt der Browser vom nächsten vorhandenen Schnitt. */
    --fw-normal: 400;
    --fw-mittel: 500;
    --fw-halbfett: 600;
    --fw-fett: 700;

    /* Größen nach Rolle (Vorbild: Seite „Parallelrunde", 16 px Grundgröße) */
    --fs-etikett: 0.78rem;          /* 12,5 px — Etikett: Barlow 600, Versalien, --ls-etikett */
    --fs-klein: 0.875rem;           /* 14 px — Nebentext, Tabellen, Knöpfe */
    --fs-text: 1rem;                /* 16 px — Fließtext, Zeilenhöhe --lh-text */
    --fs-zwischentitel: 1.0625rem;  /* 17 px — Zwischentitel: Source Sans 600 */
    --fs-titel: 1.5rem;             /* 24 px — Titel (Barlow 600) und Wortmarke (Barlow 700) */
    --fs-zahl: 1.625rem;            /* 26 px — Kennzahl: Barlow 600/700, tabellarische Ziffern */
    --fs-zahl-gross: 2.125rem;      /* 34 px — Hauptwert einer Kachel (Dashboards) */
    --fs-seitentitel: clamp(2rem, 5vw, 3rem);  /* 32–48 px — großer Titel: Barlow 700 */

    /* Laufweiten und Zeilenhöhen */
    --ls-etikett: 0.12em;           /* Versalien brauchen Luft (Vorbild 0,1–0,14 em) */
    --ls-titel: 0.01em;
    --lh-text: 1.55;
    --lh-titel: 1.2;
}

/* ---- Wortmarke -------------------------------------------------------
   Beide Marken werden zusammengeschrieben, Binnenversal, Barlow Semi
   Condensed 700 (bis 25.09.2026 Segoe UI Bold — die gab es nur unter
   Windows). Die Schrift setzt diese Datei selbst, damit jeder Client
   dieselbe Wortmarke zeigt; die Größe bestimmt der Client.
   Der geteilte Wortteil „Logger" trägt in beiden dieselbe Farbe; nur der
   unterscheidende Teil („Sunny" bzw. „net") steht in Orange.

   Markup:  <h1 class="app-title"><span class="wm-quelle">net</span><span
            class="wm-logger">Logger</span></h1>

   Bestand: das SunnyLogger-Frontend nutzt statt .wm-quelle noch die
   ältere Klasse .wm-sunny (gleicher Wert). Beim nächsten Anfassen
   dort umbenennen. */
.wm-quelle,
.wm-sunny,
.wm-logger {
    font-family: var(--font-display);
    font-weight: var(--fw-fett);
    letter-spacing: var(--ls-titel);
}
.wm-quelle,
.wm-sunny { color: var(--brand-orange); }
.wm-logger { color: var(--brand-blue); }

/* Auf hellem Grund gelten die abgedunkelten Werte. */
.auf-hell .wm-quelle,
.auf-hell .wm-sunny { color: var(--brand-orange-hell); }
.auf-hell .wm-logger { color: var(--brand-blue-hell); }