/* tokens.css: alle Gestaltungswerte von Kingmade (docs/vertrag/60-shell.md,
   shell/DESIGN.md). Die einzige Datei mit Farb- und Pixelwerten; ein Test
   (tests/test_shell.py) hält alle anderen Dateien frei davon.

   Zwei Schichten:
   1. Primitive (--neutral-500, --blau-600, --plugin-indigo): nur hier.
   2. Semantische Tokens (--bg, --fg, --tinte, --akzent): überall sonst.
   Hell und Dunkel sind ein Tokensatz mit light-dark(); color-scheme auf html
   schaltet. data-theme="light" oder "dark" überschreibt das System. */

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("schriften/InterVariable-Italic.woff2") format("woff2");
}
/* Rückfall mit angepassten Metriken, damit der Wechsel zur geladenen Schrift
   nichts verschiebt. */
@font-face {
  font-family: "Inter-Rueckfall";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* ---------- Primitive: warme Neutraltöne ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf9f7;
  --neutral-100: #f3f1ee;
  --neutral-150: #ebe8e3;
  --neutral-200: #e6e3de;
  --neutral-250: #dad6cf;
  --neutral-300: #cfcac3;
  --neutral-400: #8a8379;   /* 3,3:1 auf n100, 3,1:1 auf n150 */
  --neutral-500: #6b645c;   /* 5,2:1 auf n100, 4,8:1 auf n150 */
  --neutral-600: #574f48;
  --neutral-700: #3f3934;
  --neutral-800: #2a2521;
  --neutral-850: #211d1a;
  --neutral-900: #1a1714;
  --neutral-950: #141210;
  --neutral-1000: #100e0c;

  /* ---------- Primitive: Blau (Links, Fokus, Auswahl, Info) ---------- */
  --blau-100: #e6eefb;
  --blau-200: #b9d0f7;
  --blau-300: #8db4f0;
  --blau-500: #2a63c8;
  --blau-600: #1f4fa8;
  --blau-700: #183f88;
  --blau-900: #16274a;

  /* ---------- Primitive: Status ---------- */
  --gruen-100: #e3f3ea; --gruen-200: #a9e8c3; --gruen-400: #5fcf8f; --gruen-600: #1f7a48; --gruen-800: #14532d; --gruen-900: #12301f;
  --amber-100: #fff3dd; --amber-200: #ffd58f; --amber-400: #f0b556; --amber-600: #9a5b00; --amber-800: #6b3f00; --amber-900: #3a2a0e;
  --rot-100:   #fdeaea; --rot-200:   #ffb3b0; --rot-400:   #ff7a72; --rot-600:   #c2312c; --rot-700:  #a3241f; --rot-800:   #8a1f1b; --rot-900:   #3b1616;

  /* ---------- Primitive: Plugin-Akzente, feste Reihenfolge (DESIGN.md 3) ---------- */
  --plugin-indigo:  light-dark(#4b48b6, #a7a4f2);
  --plugin-petrol:  light-dark(#0e6a72, #5cc2ca);
  --plugin-violett: light-dark(#7c3fa1, #c99ceb);
  --plugin-kupfer:  light-dark(#a3501f, #f0a26f);
  --plugin-rosa:    light-dark(#b23868, #f28ab2);
  --plugin-oliv:    light-dark(#5c6b1b, #b8c75a);
  --plugin-himmel:  light-dark(#1b6ea7, #7bc0ee);
  --plugin-braun:   light-dark(#7a5030, #cfa07c);

  /* ---------- Semantisch: Flächen ---------- */
  /* Hell: getönte Seite, weiße Karten darauf, Seitenleiste eine Stufe unter
     der Seite. Drei Stufen, die das Auge trennt (Seite zu Karte 1,13:1,
     Seitenleiste zu Karte 1,22:1); DESIGN.md, Entscheidungen beim Bauen. */
  --bg:          light-dark(var(--neutral-100), var(--neutral-950));  /* Seite */
  --bg-leise:    light-dark(var(--neutral-150), var(--neutral-900));  /* Seitenleiste, Bänder */
  --bg-flaeche:  light-dark(var(--neutral-0),   var(--neutral-850));  /* Karten, Zeilen */
  --bg-erhoben:  light-dark(var(--neutral-0),   var(--neutral-800));  /* Dialoge, Schublade */
  --bg-vertieft: light-dark(var(--neutral-0),   var(--neutral-1000)); /* Eingaben */
  --bg-schleier: light-dark(rgb(26 23 20 / 0.45), rgb(0 0 0 / 0.6));  /* hinter Dialogen */

  /* ---------- Semantisch: Text ---------- */
  --fg:         light-dark(var(--neutral-900), #ece8e3);          /* 16:1 / 15:1 */
  --fg-leise:   light-dark(var(--neutral-600), #b0a99f);          /* 8:1 */
  --fg-zart:    light-dark(var(--neutral-500), #8c857b);          /* 5,2:1 auf --bg, 4,8:1 auf --bg-leise / 4,8:1 */
  --fg-inaktiv: light-dark(var(--neutral-400), #5c564f);          /* 3,3:1 / 3:1, nur Inaktives */

  /* ---------- Semantisch: Tinte, die Hauptaktion ---------- */
  --tinte:        light-dark(var(--neutral-900), #ece8e3);
  --tinte-hover:  light-dark(var(--neutral-700), var(--neutral-0));
  --tinte-aktiv:  light-dark(var(--neutral-800), var(--neutral-200));
  --fg-auf-tinte: light-dark(var(--neutral-50),  var(--neutral-950));

  /* ---------- Semantisch: Linien ---------- */
  --rand:       light-dark(var(--neutral-250), #2e2a26);          /* 1,45:1 auf Karten, 1,28:1 auf der Seite */
  --rand-stark: light-dark(var(--neutral-400), #6b645b);          /* 3,3:1 auf --bg, 3,8:1 auf Karten / 3,1:1 */

  /* ---------- Semantisch: Blau ---------- */
  --link:       light-dark(var(--blau-600), var(--blau-300));     /* 7:1 / 8:1 */
  --link-hover: light-dark(var(--blau-700), var(--blau-200));
  --fokus:      light-dark(var(--blau-500), var(--blau-300));     /* 3:1 auf jeder Fläche */
  --auswahl-bg: light-dark(var(--blau-100), var(--blau-900));
  --auswahl-fg: light-dark(var(--blau-700), var(--blau-200));

  /* ---------- Semantisch: Status (immer mit Symbol und Text) ---------- */
  --erfolg:     light-dark(var(--gruen-600), var(--gruen-400));
  --erfolg-bg:  light-dark(var(--gruen-100), var(--gruen-900));
  --erfolg-fg:  light-dark(var(--gruen-800), var(--gruen-200));
  --warnung:    light-dark(var(--amber-600), var(--amber-400));
  --warnung-bg: light-dark(var(--amber-100), var(--amber-900));
  --warnung-fg: light-dark(var(--amber-800), var(--amber-200));
  --gefahr:       light-dark(var(--rot-600), var(--rot-400));
  --gefahr-hover: light-dark(var(--rot-700), var(--rot-200));
  --gefahr-bg:    light-dark(var(--rot-100), var(--rot-900));
  --gefahr-fg:    light-dark(var(--rot-800), var(--rot-200));
  --fg-auf-gefahr: light-dark(var(--neutral-0), var(--neutral-950));
  --info:       light-dark(var(--blau-600), var(--blau-300));
  --info-bg:    light-dark(var(--blau-100), var(--blau-900));
  --info-fg:    light-dark(var(--blau-700), var(--blau-200));

  /* ---------- Semantisch: Akzent des aktuellen Orts ---------- */
  /* Kern-Ansichten: neutral. data-plugin auf html oder auf dem
     Navigationseintrag bildet auf einen Plugin-Akzent ab (unten). Seit kern.8
     Nachtrag 2 ist der Akzent auch die Füllung des Fortschritts (DESIGN.md 3,
     vierte Stelle): hell 4,5:1 bis 5,9:1 auf der Spur, dunkel 7,6:1 bis 9,7:1. */
  --akzent: var(--fg);
  --akzent-bg: color-mix(in oklab, var(--akzent) 10%, var(--bg));

  /* ---------- Semantisch: Konsole (kern.8 Nachtrag 2) ---------- */
  /* Die Konsoleneingabe ist in beiden Schemata eine dunkle Fläche wie ein
     Terminal. Kontraste (DESIGN.md 8): Fläche auf Karte hell 15,2:1, Text
     14,4:1 / 15,8:1, Prompt 9,3:1 / 8,3:1, Fehlerrand 6,0:1 / 7,6:1, Fokusrand
     6,7:1 / 9,1:1; der Fokusring liegt außen auf der Karte in --fokus. */
  --konsole-bg:     light-dark(var(--neutral-800), var(--neutral-1000));
  --konsole-fg:     light-dark(var(--neutral-50), #ece8e3);
  --konsole-prompt: light-dark(var(--neutral-300), #b0a99f);
  --konsole-rand:   light-dark(var(--neutral-800), var(--neutral-600));
  --konsole-fehler: var(--rot-400);
  --konsole-fokus:  var(--blau-300);

  /* ---------- Semantisch: QR-Code (sicherheit.12) ---------- */
  /* Ein QR-Code wird gescannt, nicht gelesen: schwarz auf weiß in beiden
     Schemata, kein light-dark (DESIGN.md, Entscheidung vom 2026-10-30). */
  --qr-fg: var(--neutral-1000);
  --qr-bg: var(--neutral-0);

  /* ---------- Semantisch: Karteikarte (kern.8 Nachtrag 2) ---------- */
  /* Papierton statt Kartenweiß, damit die Karte eine Karte ist und keine
     zweite Karte der Shell; Rand in --rand-stark (3,6:1 hell). */
  --papier-100: #fbf6ea;
  --karteikarte-bg: light-dark(var(--papier-100), var(--neutral-800));

  /* ---------- Schatten ---------- */
  --schatten-farbe: light-dark(rgb(26 23 20 / 0.08), rgb(0 0 0 / 0.5));
  --schatten-s: 0 1px 2px var(--schatten-farbe);
  --schatten-m: 0 4px 12px var(--schatten-farbe);
  --schatten-l: 0 12px 32px var(--schatten-farbe);

  /* ---------- Abstände: 4 px Basis, in rem ---------- */
  --raum-0: 0;
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.25rem;
  --raum-6: 1.5rem;
  --raum-8: 2rem;
  --raum-10: 2.5rem;
  --raum-12: 3rem;
  --raum-16: 4rem;
  --raum-20: 5rem;
  --raum-24: 6rem;

  /* ---------- Linien ---------- */
  --linie: 1px;
  --linie-stark: 2px;      /* Fokusring, Spinner */
  --marke-breite: 3px;     /* Akzentbalken, Kachelkante */
  --fokus-abstand: 2px;

  /* ---------- Radien ---------- */
  --radius-s: 0.25rem;
  --radius-m: 0.375rem;
  --radius-l: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-voll: 9999px;

  /* ---------- Schrift ---------- */
  --schrift-ui: "InterVariable", "Inter-Rueckfall", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  --zeile-eng: 1.2;
  --zeile-knapp: 1.35;
  --zeile-normal: 1.5;
  --zeile-weit: 1.65;
  --gewicht-normal: 400;
  --gewicht-mittel: 500;
  --gewicht-halbfett: 600;
  --gewicht-fett: 700;
  --mass: 65ch;

  /* ---------- Maße ---------- */
  --kopfzeile-h: 3.5rem;          /* 56 px */
  --seitenleiste-b: 13.75rem;     /* 220 px offen */
  --seitenleiste-schmal: 3.5rem;  /* 56 px Symbolleiste */
  --bedien-h: 2.5rem;             /* 40 px Knöpfe, Eingaben */
  --bedien-klein: 2rem;           /* 32 px kleine Knöpfe für Zeilenaktionen */
  --zeile-h: 2.75rem;             /* 44 px Tabellenzeilen, Navigationseinträge */
  --touch-min: 2.75rem;           /* 44 px */
  --symbol: 1.25rem;              /* 20 px */
  --symbol-gross: 3rem;           /* Leerzustand, Fehlerbild */
  --inhalt-max: 75rem;            /* 1200 px */
  --karte-max: 26rem;             /* 416 px Anmeldung, Dialog */
  --karteikarte-b: 30rem;         /* 480 px Karteikarte mit Skript (kern.8 Nachtrag 1) */
  --karteikarte-verhaeltnis: 7 / 5; /* Seitenverhältnis der Karteikarte, Maß einer A6-Karte */
  --karteikarte-zeile: 1.75rem;     /* 28 px Linienabstand auf der Rückseite, wie liniertes Papier */
  --formular-max: 40rem;          /* 640 px */
  --schublade-b: 17.5rem;         /* 280 px */
  /* Höhe der Leiste der Schrittfolge (kern.8 Nachtrag 2): eine Zeile ab 64em,
     zwei Zeilen darunter (unten). Dieselbe Höhe hält der Platzhalter vor
     shell.js frei, damit die Seite nicht springt. */
  --schrittfolge-leiste-h: var(--bedien-h);

  /* ---------- Bewegung ---------- */
  --dauer-schnell: 100ms;
  --dauer-normal: 180ms;
  --dauer-langsam: 300ms;
  --kurve-ein: cubic-bezier(0.2, 0, 0, 1);
  --kurve-aus: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Ebenen ---------- */
  --ebene-menue: 100;
  --ebene-haftend: 200;
  --ebene-schublade: 300;
  --ebene-dialog: 400;
  --ebene-hinweis: 600;
}

/* Schema erzwingen (kern.11 setzt das Attribut aus den Einstellungen). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Plugin-Akzent: der Kern setzt data-plugin und data-akzent auf html (Seite
   eines Plugins), auf jeden Navigationseintrag und jede Kachel eines Plugins
   (kern.4). Zuordnung aus DESIGN.md, Abschnitt 3: die vier benannten Plugins
   haben feste Nummern, jedes weitere bekommt die nächste freie ab 5. */
[data-plugin="archiv"]   { --akzent: var(--plugin-indigo); }
[data-plugin="finanzen"] { --akzent: var(--plugin-petrol); }
[data-plugin="wissen"]   { --akzent: var(--plugin-violett); }
[data-plugin="steuer"]   { --akzent: var(--plugin-kupfer); }
[data-akzent="1"] { --akzent: var(--plugin-indigo); }
[data-akzent="2"] { --akzent: var(--plugin-petrol); }
[data-akzent="3"] { --akzent: var(--plugin-violett); }
[data-akzent="4"] { --akzent: var(--plugin-kupfer); }
[data-akzent="5"] { --akzent: var(--plugin-rosa); }
[data-akzent="6"] { --akzent: var(--plugin-oliv); }
[data-akzent="7"] { --akzent: var(--plugin-himmel); }
[data-akzent="8"] { --akzent: var(--plugin-braun); }

/* Unter 48em (Handy) ist jedes Bedienelement ein Berührungsziel: 44 px statt
   40 px (DESIGN.md 5, Berührungsziele; AUDIT-2026-09.md, D8-06). */
@media (max-width: 47.99em) {
  :root { --bedien-h: var(--touch-min); --bedien-klein: var(--touch-min); }
}

/* Unter 64em steht die Leiste der Schrittfolge in zwei Zeilen (Knöpfe und
   Stand, darunter Fortschritt und Schalter). */
@media (max-width: 63.99em) {
  :root { --schrittfolge-leiste-h: calc(2 * var(--bedien-h) + var(--raum-3)); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-schnell: 0ms;
    --dauer-normal: 0ms;
    --dauer-langsam: 0ms;
  }
}