/*
 * mipla · Marken-Tokens v1  (SSoT: brand/README.md)
 *
 * Diese Datei ist die einzige Stelle, an der Farb-, Schrift- und Rasterwerte der Marke
 * stehen. Jede kunden-sichtbare Oberfläche liest sie und definiert keine eigenen Werte.
 * Wer in einer Komponente ein Farb-Literal setzt, hebt die Marke aus den Angeln.
 *
 * Aufbau: primitive Werte -> semantische Rollen. Die Komponenten-Ebene (Knopf, Feld,
 * Tabelle, Badge) liegt als eigener Layer darüber in brand/components.css und liest von
 * hier nur die semantischen Rollen; diese Datei bleibt klein.
 *
 * Bestand (nicht verhandelbar): --c-indigo-800 = #261d8a und --c-n-0 = #ffffff sind die
 * beiden Primärfarben. Alles andere ist daraus abgeleitet: gleicher Marken-Hue (275.6° in
 * OKLCH), perzeptuell gleichmässige Lightness-Stufen. Skalen-Konvention: Nummer steigt,
 * Farbe wird dunkler.
 *
 * Kontraste sind gemessen, nicht geschätzt, Tabelle in brand/README.md, nachrechenbar mit
 * brand/tools/contrast_check.py (liest diese Datei).
 *
 * Schrift-Einbindung liegt separat in brand/fonts.css (@font-face + selbst gehostete
 * Dateien). Beide Dateien gehören zusammen.
 */

:root {
  /* ===== primitiv: Marken-Indigo ===================================================== */
  /* 800 ist der Bestandswert. Die Stufen darüber und darunter halten Hue und Sättigung,
     damit die Marke über Flächen, Chips und Fokusringe hinweg dieselbe Farbe bleibt. */
  --c-indigo-50:  #eff3ff;
  --c-indigo-100: #e0e6ff;
  --c-indigo-200: #c8d1ff;
  --c-indigo-300: #b3c0ff;
  --c-indigo-400: #909eef;
  --c-indigo-500: #7481e6;
  --c-indigo-600: #535bce;
  --c-indigo-700: #3a3baf;
  --c-indigo-800: #261d8a;  /* Marke */
  --c-indigo-900: #181361;
  --c-indigo-950: #0c0c36;

  /* ===== primitiv: Neutrale ========================================================== */
  /* Kein reines Grau: gleicher Hue wie die Marke, nur mit sehr wenig Sättigung. Reines
     Grau neben einem gesättigten Indigo sieht schmutzig aus, hier zieht alles zusammen. */
  --c-n-0:   #ffffff;  /* Marke */
  --c-n-25:  #f5f6fc;
  --c-n-50:  #eceef5;
  --c-n-100: #e6e7ef;
  --c-n-200: #ced0da;
  --c-n-300: #9b9eaa;
  --c-n-400: #828593;
  --c-n-500: #686b7a;
  --c-n-600: #525667;
  --c-n-700: #3b3f51;
  --c-n-800: #252838;
  --c-n-850: #1b1d2a;
  --c-n-900: #11131d;
  --c-n-950: #0a0c14;

  /* ===== primitiv: Zustände ========================================================== */
  /* Bewusst weit weg vom Marken-Hue (148° / 75° / 27° gegen 275.6°), damit ein Kunde
     „aktiv" nicht als Dekoration liest und „kritisch" nicht als Markenfläche. Je Modus
     ein eigener Wert: 700 trägt auf hellem Grund, 400 auf dunklem.

     Die 500er-Stufe ist die Flächen-Stufe für Light (CD-S3): sie muss nur 3:1 halten,
     nicht 4.5:1, und ist deshalb heller und satter als die 700er. Ein Balken in --c-warn-700
     wirkt ockerbraun statt warnend, weil er ein Textziel erfüllt, das eine Fläche nicht
     stellt. Hergeleitet wie die übrigen Stufen: Hue der 700er, Chroma der 400er, Lightness
     so hell wie möglich bei noch 3.1:1 gegen die dunkelste Light-Fläche (--surface-sunken).
     Auf ihnen steht kein Text, sie tragen Fläche und Rand. */
  --c-ok-50:    #e0f3e2;
  --c-ok-400:   #73c881;
  --c-ok-500:   #439753;
  --c-ok-700:   #206f33;
  --c-ok-900:   #172e1b;
  --c-warn-50:  #fdead0;
  --c-warn-400: #eba941;
  --c-warn-500: #b97900;
  --c-warn-700: #8f5d00;
  --c-warn-900: #362407;
  --c-crit-50:  #ffe5e0;
  --c-crit-400: #f47c70;
  --c-crit-500: #d76258;
  --c-crit-700: #b02b27;
  --c-crit-900: #3f1c19;

  /* ===== semantisch: Light ========================================================== */
  /* Flächen: der Grund ist leicht getönt, die Karte darauf ist reines Weiss. Weiss ist
     Primärfarbe, es trägt den Inhalt, nicht den Hintergrund. */
  --surface:        var(--c-n-25);
  --surface-raised: var(--c-n-0);
  --surface-sunken: var(--c-n-50);

  --ink:            var(--c-n-800);
  --ink-soft:       var(--c-n-600);
  --ink-faint:      var(--c-n-500);

  /* --line trägt Struktur (Feldrand, Panel-Kante, Tabellenkopf) und erfüllt 3:1.
     --line-soft ist rein dekorativ (Zeilentrenner) und hat kein Kontrastziel,
     niemals für einen Eingabefeld-Rand verwenden. */
  --line:           var(--c-n-400);
  --line-soft:      var(--c-n-200);

  --accent:         var(--c-indigo-800);
  --accent-strong:  var(--c-indigo-900);
  --accent-tint:    var(--c-indigo-100);
  --accent-ink:     var(--c-n-0);
  /* Grossflächige, gedämpfte Markenfläche, auf der Text steht: das Muster «Logo-Icon als
     Fläche» (CD-S3). Kein Tint-Ersatz - der Tint ist ein Chip-Grund von der Grösse eines
     Wortes, diese Fläche trägt Absätze und braucht deshalb im Dark einen eigenen Wert. */
  --accent-veil:    var(--c-indigo-100);

  /* Drei Rollen je Zustand, weil dieselbe Bedeutung zwei Kontrastziele hat:
     --state-*      Text und Symbol, 4.5:1 gegen jede Fläche
     --state-*-area Fläche, Balkenfüllung, Rand, 3:1 gegen jede Fläche und gegen den Tint
     --state-*-tint Chip-Grund, trägt --state-* als Text
     --state-ink    Text auf einer gesättigten Zustandsfläche (destruktiver Knopf) */
  --state-ok:            var(--c-ok-700);
  --state-ok-area:       var(--c-ok-500);
  --state-ok-tint:       var(--c-ok-50);
  --state-warn:          var(--c-warn-700);
  --state-warn-area:     var(--c-warn-500);
  --state-warn-tint:     var(--c-warn-50);
  --state-critical:      var(--c-crit-700);
  --state-critical-area: var(--c-crit-500);
  --state-critical-tint: var(--c-crit-50);
  --state-ink:           var(--c-n-0);

  --focus:          var(--c-indigo-700);
  --shadow-card:    0 1px 2px rgb(37 40 56 / .07);

  /* ===== Typografie ================================================================= */
  /* Eine Familie in drei Rollen. Noto Sans bringt Tabellenziffern (tnum), geschlitzte
     Null (zero) und echte Kapitälchen (smcp) mit, deshalb braucht die Daten-Rolle
     keinen zweiten Webfont. --font-mono bleibt System-Stack: für Kennungen, kein
     Download, kein Drittabfluss. */
  --font-body:    "Noto Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-data:    var(--font-body);
  --font-mono:    ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --weight-body:    400;
  --weight-medium:  600;
  --weight-bold:    700;

  /* Zahlen in Tabellen und Beträgen: Ziffern gleich breit, sonst tanzen Spalten.
     --numeric-technical zusätzlich mit geschlitzter Null für Kennungen und Hashes. */
  --numeric-tabular:   tabular-nums lining-nums;
  --numeric-technical: tabular-nums lining-nums slashed-zero;

  /* Skala im Verhältnis 1.2, Basis 1rem. */
  /* Zwei Stufen nach unten, hinzugefügt für die Apex-Webseite (WEB-S6, 2026-10-15,
     Entscheid Michael). Anlass ist der Herkunftshinweis unter den generierten Bildern: er
     soll sichtbar sein, aber dem Bild nicht die Aufmerksamkeit nehmen.
     ⚠ --step--3 ist das Ende der Fahnenstange, nicht der Anfang einer Reihe. 9.3px trägt
     noch einen kurzen Hinweis neben einer Abbildung; Lauftext, Beschriftungen und alles,
     was gelesen werden MUSS, gehören dort nicht hin. Wer eine vierte Stufe nach unten
     braucht, braucht in Wahrheit weniger Text. */
  --step--3: 0.579rem;
  --step--2: 0.694rem;
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.44rem;
  --step-3:  1.728rem;
  --step-4:  2.074rem;
  /* Drei Stufen weiter, hinzugefügt für die Apex-Webseite (WEB-S6, 2026-10-13). Das
     Kunden-Portal braucht sie nicht: eine Oberfläche, die Daten zeigt, hört bei --step-4
     auf. Eine öffentliche Seite hat eine Zeile, die als Erstes gelesen wird, und die
     braucht Grösse. Die Rolle dafür heisst --font-display und steht seit CD-S1 im
     Fundament, ihr fehlte nur die Grösse.
     ⚠ Die Stufen sind feste Werte. Eine Oberfläche, die fliessend zwischen zwei Stufen
     wachsen will, setzt das clamp() selbst zusammen (clamp(var(--step-4), …vw, var(--step-7)));
     der vw-Anteil hängt an ihrer Spaltenbreite und ist Layout, nicht Marke. */
  --step-5:  2.488rem;
  --step-6:  2.986rem;
  --step-7:  3.583rem;

  --lh-tight:  1.2;   /* Titel */
  --lh-normal: 1.55;  /* Lauftext */
  --lh-data:   1.35;  /* Tabellen, Feld-Wert-Listen */

  --tracking-tight: -0.01em;  /* ab --step-3 */
  --tracking-caps:   0.06em;  /* Kapitälchen-Labels brauchen Luft, sonst kleben sie */

  /* ===== Raster ===================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius: 4px;
  --radius-pill: 999px;

  /* Kopfzeile in zwei Höhen, und die Zahlen sind gerechnet, nicht gewählt: das volle Logo
     braucht 90 px Breite (Minimalgrösse) und rundum seinen Schutzraum von 19.5 % der Höhe,
     zusammen 4.5 rem. Wo so viel Höhe nicht trägt (Handy, klebende Leiste über einer
     zweiten Leiste), steht die enge Kopfzeile mit dem Logo-Icon: 24 px Minimum, 27.8 %
     Schutzraum, zusammen 3 rem. WELCHE Höhe wann gilt, entscheidet die Oberfläche - der
     Umbruchpunkt ist Layout und gehört nicht ins Fundament.
     Herleitung und Logo-Höhen: brand/components.md, Abschnitt Kopfzeile. */
  --topbar-height:         4.5rem;
  --topbar-height-compact: 3rem;
  /* Höhe aller klebenden Leisten über dem Inhalt, Sprungziele halten davon Abstand.
     Auf schmalen Viewports kommt die Navigationsleiste dazu, die Oberfläche misst nach. */
  --sticky-height: var(--topbar-height);
}

/* ===== semantisch: Dark ============================================================
 * Keine Invertierung. Der Akzent muss auf dunklem Grund hell sein, sonst verschwindet er;
 * gleicher Hue, weniger Sättigung, damit er nicht flimmert. Zustandsfarben wechseln von
 * der 700er- auf die 400er-Stufe. Jeder Wert aus dem Light-Block ist hier neu gesetzt.
 * Doppelt geführt: prefers-color-scheme folgt dem System, [data-theme] erlaubt einer
 * Oberfläche, den Modus zu erzwingen.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        var(--c-n-900);
    --surface-raised: var(--c-n-850);
    --surface-sunken: var(--c-n-950);

    --ink:            var(--c-n-100);
    --ink-soft:       var(--c-n-300);
    --ink-faint:      var(--c-n-400);

    --line:           var(--c-n-500);
    --line-soft:      var(--c-n-700);

    --accent:         var(--c-indigo-400);
    --accent-strong:  var(--c-indigo-300);
    --accent-tint:    var(--c-indigo-900);
    --accent-ink:     var(--c-indigo-950);
    /* Im Dark trägt der Tint als grosse Fläche nicht mehr: gegen die Karte bleibt zu
       wenig Helligkeitsunterschied. Die Marke selbst trägt (dL 0.097 statt 0.026). */
    --accent-veil:    var(--c-indigo-800);

    /* Fläche und Text fallen hier auf denselben Wert: hell auf dunklem Grund erfüllt die
       400er-Stufe beide Ziele (>= 8:1 als Text, weit über 3:1 als Fläche). Die Rollen
       bleiben trotzdem getrennt, weil eine Oberfläche sie getrennt liest. */
    --state-ok:            var(--c-ok-400);
    --state-ok-area:       var(--c-ok-400);
    --state-ok-tint:       var(--c-ok-900);
    --state-warn:          var(--c-warn-400);
    --state-warn-area:     var(--c-warn-400);
    --state-warn-tint:     var(--c-warn-900);
    --state-critical:      var(--c-crit-400);
    --state-critical-area: var(--c-crit-400);
    --state-critical-tint: var(--c-crit-900);
    --state-ink:           var(--c-n-950);

    --focus:          var(--c-indigo-300);
    --shadow-card:    0 1px 2px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  --surface:        var(--c-n-900);
  --surface-raised: var(--c-n-850);
  --surface-sunken: var(--c-n-950);

  --ink:            var(--c-n-100);
  --ink-soft:       var(--c-n-300);
  --ink-faint:      var(--c-n-400);

  --line:           var(--c-n-500);
  --line-soft:      var(--c-n-700);

  --accent:         var(--c-indigo-400);
  --accent-strong:  var(--c-indigo-300);
  --accent-tint:    var(--c-indigo-900);
  --accent-ink:     var(--c-indigo-950);
  /* Im Dark trägt der Tint als grosse Fläche nicht mehr: gegen die Karte bleibt zu
     wenig Helligkeitsunterschied. Die Marke selbst trägt (dL 0.097 statt 0.026). */
  --accent-veil:    var(--c-indigo-800);

  /* Fläche und Text fallen hier auf denselben Wert: hell auf dunklem Grund erfüllt die
     400er-Stufe beide Ziele (>= 8:1 als Text, weit über 3:1 als Fläche). Die Rollen
     bleiben trotzdem getrennt, weil eine Oberfläche sie getrennt liest. */
  --state-ok:            var(--c-ok-400);
  --state-ok-area:       var(--c-ok-400);
  --state-ok-tint:       var(--c-ok-900);
  --state-warn:          var(--c-warn-400);
  --state-warn-area:     var(--c-warn-400);
  --state-warn-tint:     var(--c-warn-900);
  --state-critical:      var(--c-crit-400);
  --state-critical-area: var(--c-crit-400);
  --state-critical-tint: var(--c-crit-900);
  --state-ink:           var(--c-n-950);

  --focus:          var(--c-indigo-300);
  --shadow-card:    0 1px 2px rgb(0 0 0 / .5);
}