/* ZEROADMINS — Gestaltungsmarken.
 *
 * Hier steht ausschliesslich, WAS es gibt: Schriften, Farben, Abstände,
 * Zeiten. Wie etwas aussieht, steht in app.css. Der Grund für die Trennung
 * ist praktisch: eine Farbe ändert man an genau einer Stelle, und es ist
 * sichtbar, wie viele Farben es überhaupt gibt.
 *
 * Farbe ist hier ein SIGNAL, keine Verzierung. Es gibt drei Signalfarben
 * (ok, warnung, fehler) und einen gedämpften Akzent für Auswahl und Fokus.
 * Wer eine vierte Farbe braucht, braucht meistens eine bessere Hierarchie.
 *
 * Kehrseite der oklch-Notation: sehr alte Browser (vor 2023) kennen sie
 * nicht und zeigen dann die Vorgabefarben des Browsers. Das ist bewusst in
 * Kauf genommen — die Oberfläche ist ein Werkzeug für wenige bekannte
 * Arbeitsplätze, kein öffentlicher Auftritt.
 */

/* ── Schriften ───────────────────────────────────────────────────────────
 * Selbst gehostet. Die Inhaltsrichtlinie erlaubt `font-src 'self'`; eine
 * externe Schrift würde schlicht nicht geladen.
 * Zwei Familien, mehr nicht: Inter Tight für Fliesstext und Beschriftungen,
 * Geist Mono für alles, was gezählt, verglichen oder abgetippt wird.
 */
@font-face {
  font-family: "Inter Tight";
  src: url("/static/fonts/inter-tight.woff2") format("woff2-variations"),
       url("/static/fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono.woff2") format("woff2-variations"),
       url("/static/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark light;

  --schrift-text: "Inter Tight", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --schrift-zahl: "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* ── Schriftgrössen ──────────────────────────────────────────────────
   * Dichte Oberfläche: 14px Grundgrösse. Hierarchie entsteht über den
   * Sprung von 14 auf 20 auf 28 — nicht über Rahmen und Schatten.
   */
  --text-xs: 0.6875rem;   /* 11px — Spaltenköpfe, Kennzeichnungen */
  --text-s: 0.75rem;      /* 12px — Nebentexte */
  --text-m: 0.8125rem;    /* 13px — Tabellenzellen */
  --text-basis: 0.875rem; /* 14px — Grundgrösse */
  --text-l: 1rem;         /* 16px — Abschnittsüberschriften */
  --text-xl: 1.25rem;     /* 20px — Seitentitel */
  --text-2xl: 1.75rem;    /* 28px — Kennzahlen */
  --text-3xl: 2.25rem;    /* 36px — grosse Kennzahlen */

  --zeilen-eng: 1.25;
  --zeilen-normal: 1.5;
  --zeilen-weit: 1.65;

  /* ── Abstände ────────────────────────────────────────────────────────
   * Vielfache von 4px. Absichtlich kein gleichförmiges Raster über alles:
   * Rhythmus entsteht dadurch, dass Zusammengehöriges eng steht und
   * Getrenntes weit.
   */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4rem;

  /* ── Rundungen ───────────────────────────────────────────────────────── */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  /* ── Masse des Gerüsts ───────────────────────────────────────────────── */
  --leiste-breite: 15rem;
  --kopf-hoehe: 3.25rem;
  --inhalt-max: 82rem;
  --schmal-max: 24rem;

  /* ── Bewegung ────────────────────────────────────────────────────────
   * Zwei Zeiten, eine Kurve. Bewegung gibt es nur dort, wo sie einen
   * Zustandswechsel erklärt (Fokus, Aufklappen) — nicht als Auftritt.
   */
  --dauer-schnell: 110ms;
  --dauer-normal: 180ms;
  --kurve: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ── Farben: dunkel (Vorgabe) ────────────────────────────────────────
   * Drei Flächenstufen, ein Grund. Der Grund ist nicht reines Schwarz —
   * auf schwarzem Grund wirken helle Texte härter, als sie sind, und
   * feine Linien verschwinden.
   */
  --grund: oklch(15% 0.008 265);
  --flaeche: oklch(18.5% 0.008 265);
  --flaeche-hoch: oklch(22% 0.009 265);
  --flaeche-still: oklch(20.5% 0.008 265);

  --linie: oklch(28% 0.010 265);
  --linie-stark: oklch(38% 0.012 265);
  /* Umriss von Bedienelementen. Getrennt von --linie-stark, weil eine Linie
     zwischen zwei Flächen leiser sein darf als der Rand eines Feldes, das man
     treffen soll: WCAG 1.4.11 verlangt für Bedienelemente 3:1, für schmückende
     Trennlinien nichts. Gemessen: 3.57 gegen --grund, 3.38 gegen --flaeche,
     3.14 gegen --flaeche-hoch, 3.25 gegen --flaeche-still. */
  --linie-bedienung: oklch(52% 0.012 265);

  --text: oklch(95% 0.004 265);
  --text-leise: oklch(74% 0.008 265);
  /* Angehoben von 58%: darunter blieb der Nebentext unter der AA-Schwelle von
     4.5:1, und er trägt Spaltenköpfe und Hinweise in 11–12px — genau die
     Grösse, für die die Schwelle gedacht ist. Gemessen: 5.19 gegen --grund,
     4.92 gegen --flaeche, 4.57 gegen --flaeche-hoch, 4.73 gegen
     --flaeche-still. */
  --text-schwach: oklch(61% 0.010 265);

  --akzent: oklch(72% 0.085 245);
  --akzent-still: oklch(30% 0.045 245);
  --akzent-auf: oklch(16% 0.02 245);

  --ok: oklch(74% 0.120 155);
  --warnung: oklch(80% 0.115 80);
  --fehler: oklch(68% 0.160 25);
  --unbekannt: oklch(52% 0.010 265);

  /* Sehr zurückhaltende Flächen für Meldungen. */
  --ok-still: oklch(28% 0.045 155);
  --warnung-still: oklch(29% 0.045 80);
  --fehler-still: oklch(28% 0.055 25);

  --schatten-dialog: 0 24px 60px oklch(0% 0 0 / 0.55);
  --schleier: oklch(10% 0.01 265 / 0.72);
}

/* ── Farben: hell ──────────────────────────────────────────────────────
 * Dunkel ist die Vorgabe. Hell muss trotzdem tragen — jemand arbeitet an
 * einem hellen Arbeitsplatz oder druckt eine Ansicht aus. Die Signalfarben
 * werden dafür abgedunkelt, sonst reissen sie den Kontrast.
 */
@media (prefers-color-scheme: light) {
  :root {
    --grund: oklch(97.5% 0.003 265);
    --flaeche: oklch(100% 0 0);
    --flaeche-hoch: oklch(96% 0.004 265);
    --flaeche-still: oklch(94.5% 0.005 265);

    --linie: oklch(89% 0.006 265);
    --linie-stark: oklch(78% 0.008 265);
    /* Hell dreht die Richtung um: der Umriss wird dunkler als die Fläche, nicht
       heller. Gemessen: 3.39 gegen --grund, 3.64 gegen --flaeche, 3.24 gegen
       --flaeche-hoch, 3.10 gegen --flaeche-still. */
    --linie-bedienung: oklch(62% 0.010 265);

    --text: oklch(22% 0.012 265);
    --text-leise: oklch(45% 0.012 265);
    /* Abgesenkt von 58%: auf weissem Grund trug der Wert nur 3.99 gegen
       --grund. Gemessen: 5.13 gegen --grund, 5.51 gegen --flaeche, 4.90 gegen
       --flaeche-hoch, 4.69 gegen --flaeche-still. */
    --text-schwach: oklch(52% 0.012 265);

    --akzent: oklch(52% 0.120 250);
    --akzent-still: oklch(94% 0.030 250);
    --akzent-auf: oklch(99% 0 0);

    --ok: oklch(50% 0.115 155);
    --warnung: oklch(56% 0.115 70);
    --fehler: oklch(51% 0.170 25);
    --unbekannt: oklch(65% 0.010 265);

    --ok-still: oklch(95% 0.035 155);
    --warnung-still: oklch(95% 0.040 80);
    --fehler-still: oklch(96% 0.030 25);

    --schatten-dialog: 0 24px 60px oklch(40% 0.02 265 / 0.22);
    --schleier: oklch(50% 0.01 265 / 0.35);
  }
}