/* ============================================================================
   Design-System „Papier" — Primitive Tokens
   ----------------------------------------------------------------------------
   ►► KOPIE. NICHT HIER BEARBEITEN. ◄◄

   Quelle (Single Source of Truth):
       sh-vetragscheck : src/styles/tokens.css

   Änderungen dort vornehmen und mit `bash scripts/sync-design-tokens.sh`
   hierher ziehen, sonst driften die beiden Apps auseinander.
   ----------------------------------------------------------------------------
   Die Datei ist FRAMEWORK-FREI: nur CSS-Custom-Properties, kein Tailwind, kein
   Build-Step nötig. Genau deshalb kann diese Flask/Jinja-App sie per <link>
   einbinden.

   ALLE Tokens sind mit --pp-* präfixiert. Jede App mappt ihr eigenes
   Vokabular darauf — sh-vetragscheck in globals.css (@theme), diese App im
   :root-Block von style.css.

   Kontrastwerte auf Leinen (#f7f4ef) sind gemessen, nicht geschätzt; die
   Werte stehen an den betroffenen Tokens. WCAG AA verlangt 4,5:1 für Text.
   ========================================================================== */

:root {
  /* --- Flächen -------------------------------------------------------------
     Leinen. bg und surface sind bewusst IDENTISCH: Papier kennt keine weißen
     Karten auf grauem Grund — der Grund selbst ist die Fläche. Karten werden
     durch Linien begrenzt, nicht durch Farbwechsel. */
  --pp-bg: #f7f4ef;
  --pp-surface: #f7f4ef;
  --pp-raised: #efeae2;

  /* --- Text ----------------------------------------------------------------
     Dreistufige Hierarchie, alle Stufen AA auf Leinen.
     Abweichung vom Mockup: dort waren fg-dim #6f665c und fg-faint #9a9086.
     #9a9086 erreicht nur 2,85:1 — durchgefallen, obwohl es die 10px-Versalien
     der Labels trägt. Beide Stufen abgedunkelt, Abstand zueinander erhalten. */
  --pp-fg: #221e1a;        /* 15,09:1 */
  --pp-fg-dim: #5c5349;    /*  6,86:1 */
  --pp-fg-faint: #756b5e;  /*  4,76:1 */

  /* --- Linien --------------------------------------------------------------
     Tragen in Papier die Struktur, die sonst Rahmen und Schatten tragen. */
  --pp-line: #ddd5c9;
  --pp-line-strong: #c0b6a7;

  /* --- Akzent --------------------------------------------------------------
     Bordeaux. Knappe Ressource: Interaktion, aktiver Zustand, Neuvertrag im
     Chart. Niemals als flächige Einfärbung ganzer Karten. */
  --pp-accent: #7c2230;    /*  8,99:1 */
  --pp-accent-fg: #faf7f2;

  /* --- Ampel ---------------------------------------------------------------
     Die fachliche Empfehlung. Erscheint als 2px-Kante an der Oberkante einer
     Karte oder als kurzer Strich vor dem Text — nie als Hintergrundfläche. */
  --pp-sev-stop: #8e3030;  /* Kündigen        7,32:1 */
  --pp-sev-hold: #8a6c22;  /* Beitragsfrei    4,51:1 */
  --pp-sev-keep: #456245;  /* Weiterführen    6,20:1 */
  --pp-sev-flag: #a05f22;  /* Prüfhinweis     4,61:1 */

  /* --- Charts --------------------------------------------------------------
     Semantik: c-new = Neuvertrag (Bordeaux, die Aussage), c0 = Bestand
     unverändert (stumpf, die Referenz), c3 = Zwischenszenario. */
  --pp-c0: #b0a695;
  --pp-c3: #8d7f6d;
  --pp-c-new: #7c2230;
  --pp-grid: #e7e0d5;
  /* Das Mockup zeigte nur drei Kurven; die App rechnet vier Szenarien
     (0/3/6/9 %). --pp-c9 ist der ergänzte vierte Ton — warmes Ocker, im
     Leinen verankert, klar von c3 und c-new unterscheidbar. */
  --pp-c9: #a05f22;

  /* --- Form ----------------------------------------------------------------
     Kanten statt Kapseln: 2px, nicht 0 — eine Haarkante wirkt gesetzt,
     exakt 0 wirkt technisch (das war Variante „Kontur"). */
  --pp-radius: 2px;
  --pp-hairline: 1px;

  /* --- Satzdichte ----------------------------------------------------------
     Papier ist die luftigste der fünf Varianten. Das ist der Punkt: ein
     Gutachten atmet, ein Dashboard drängt. */
  --pp-pad: 20px;
  --pp-row: 13px;

  /* --- Typografie ----------------------------------------------------------
     --pp-font-display trägt Überschriften und Vertragsnamen (Serif, gibt den
     redaktionellen Ton), --pp-font-num alle Geldbeträge (tabellarisch, damit
     Ziffern untereinander stehen). Die Variablen werden von der jeweiligen App
     mit konkreten Familien gefüllt — in sh-vetragscheck via next/font. */
  --pp-font-ui: var(--font-sans, "Inter", system-ui, -apple-system, sans-serif);
  --pp-font-display: var(--font-serif, "Source Serif 4", "Iowan Old Style", Georgia, serif);
  /* Kein var(--font-mono) hier — globals.css setzt --font-mono auf dieses
     Token; ein Rückverweis wäre ein Zirkelbezug und die Variable fiele aus. */
  --pp-font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================================
   Dark
   ----------------------------------------------------------------------------
   Gespiegelt aus dem Mockup. sh-vetragscheck schaltet Dark über die Klasse
   .dark (shadcn-Konvention) und hat heute KEINEN Toggle im UI — der Satz ist
   also vorbereitet, aber nicht erreichbar. Bewusst so belassen: er zu
   entfernen würde die Vorlage verschlechtern, ihn zu verkabeln war nicht Teil
   des Auftrags.

   Bewusst NICHT an prefers-color-scheme gehängt: das würde die App bei jedem
   Nutzer mit dunklem Betriebssystem umschalten — ein Verhalten, das sie heute
   nicht hat. Eine App, die den Klassen-Toggle nicht kennt, kann die Werte
   stattdessen selbst unter ihre eigene Bedingung hängen.
   ========================================================================== */

.dark {
  --pp-bg: #18150f;
  --pp-surface: #18150f;
  --pp-raised: #211d16;

  --pp-fg: #eee8dd;
  --pp-fg-dim: #a49a89;
  --pp-fg-faint: #877d6e;

  --pp-line: #332d22;
  --pp-line-strong: #463e30;

  --pp-accent: #c1596a;
  --pp-accent-fg: #17130e;

  --pp-sev-stop: #cf7b74;
  --pp-sev-hold: #c3a355;
  --pp-sev-keep: #84a184;
  --pp-sev-flag: #cd9155;

  --pp-c0: #8a8070;
  --pp-c3: #a9977f;
  --pp-c-new: #c1596a;
  --pp-grid: #2a2419;
  --pp-c9: #cd9155;
}