/* ==========================================================================
   Finanztracker — tokens.css

   Die EINE Quelle der Design-Tokens aus DESIGN.md §2 (Farben), §3 (Typografie),
   §5 (Abstaende), §6 (Elevation). Frueher stand dieser Block in app.css und
   ein halber, von Hand gepflegter Zweitauszug im <style> von templates/login.php
   — zwei Quellen, die auseinanderliefen. Jetzt verlinken layout.php und
   login.php diese Datei als erstes Stylesheet.

   HELL UND DUNKEL: Einstellungen › Darstellung (Hell, Automatisch, Dunkel;
   Standard hell) setzt <html data-darstellung="…">, daraus folgt unten
   color-scheme. Jede Farbe steht als light-dark(hell, dunkel) an EINER Stelle.
   Nie @media (prefers-color-scheme) fuer Farben: das schaute am Schalter
   vorbei aufs System — light-dark() folgt color-scheme und damit ihm.
   Kontrastwerte hell / dunkel stehen im Plan
   «Apple-Stil» und in DESIGN.md §2.

   Wer hier einen Token aendert, fuehrt DESIGN.md §2 im selben Durchgang nach.
   ========================================================================== */

:root {
  /* Hell, auch ohne Attribut (Seiten, die die Einstellung nicht lesen koennen). */
  color-scheme: light;

  /* --- Surfaces ---------------------------------------------------------- */
  /* Gruppengrund: randlose weisse Karten heben sich mit 1.13:1 ab (Apple 1.12). */
  --bg:               light-dark(#F5F0E9, #0B0A09);
  --bg-plain:         light-dark(#FCF9F5, #0B0A09);   /* Chat, Login: Papier */
  --surface:          light-dark(#FFFFFF, #221F1C);   /* Karten, Zeilen */
  --surface-elevated: light-dark(#FFFFFF, #2C2825);   /* Sheet, Menue — im Dunkeln heller statt Schatten */
  --fill:             light-dark(#F5F0E9, #2C2825);   /* Controls IN Karten, Tabellenkoepfe */

  /* --- Lines ------------------------------------------------------------- */
  --separator:        light-dark(#E9E1D6, #3D3833);   /* Trennlinie in Listen, Feldrand — dekorativ */
  --border-strong:    light-dark(#D3C8B8, #5A524A);   /* Hover, betonte Trennung */

  /* --- Text -------------------------------------------------------------- */
  --text:             light-dark(#1B2A33, #F2EDE6);   /* 14.73 / 14.08 */
  --text-muted:       light-dark(#5F6B74, #A69D93);   /* 5.47 (4.82 auf --bg) / 6.14 */
  --text-subtle:      light-dark(#98A2A9, #6E665E);   /* NUR Platzhalter, deaktivierte
                                                          Felder, dekorative Glyphen —
                                                          fuer Text zu schwach (§2).
                                                          Lesbares nimmt --text-muted. */

  /* --- Primaeraktion und Interaktion ------------------------------------- */
  /* Navy bleibt Primaerflaeche; Links, aktive Tabs und Textknoepfe tragen den
     helleren --tint (Navy lag nur 1.27:1 neben --text). */
  --accent:           light-dark(#143C54, #8EC1E3);
  --accent-hover:     light-dark(#0E2C3E, #A9D1EC);
  --on-accent:        light-dark(#FFFFFF, #0B1E2A);   /* Text auf --accent: 11.64 / 8.83 */
  --tint:             light-dark(#246B96, #8EC1E3);   /* 5.80 / 8.50 */
  --accent-weak:      light-dark(#E7EDF2, #1A3547);   /* Tint darauf 4.92 / 6.62 */

  /* --- Semantik: Geld und Zustand ---------------------------------------- */
  /* Warnung und Fehler je EIN Token fuer Text und Flaeche (frueher Grundfarbe
     plus abgedunkelte --*-text-Variante per color-mix). */
  --positive:         light-dark(#2F7A55, #5DC48E);   /* 5.20 / 7.61 */
  --positive-weak:    light-dark(#E8F2EC, #15291E);
  --negative:         light-dark(#A84B41, #E8918A);   /* 5.60 / 6.91 */
  --negative-weak:    light-dark(#F8EBE8, #33201C);
  --warning:          light-dark(#8C6418, #E0A84A);   /* 5.31 / 7.71 */
  --warning-weak:     light-dark(#FBF1E0, #33271A);
  /* Hinweise: Wangenblau als Flaeche, Text bleibt --text (10.80 / 12.00).
     Blauer Text heisst unter iOS «antippbar» — darum kein --info mehr. */
  --hint:             light-dark(#D2DCFD, #232B45);

  /* --- Maskottchen-Farben (roter Panda) — Markenakzente -------------------
     NIE im Dunkeln umdefinieren: partials/panda.php liest --brand,
     --brand-deep, --panda-cheek und --panda-ink direkt, das Inline-Momo
     wuerde sich sonst umfaerben. Im Dunkeln sitzt Momo auf --momo-tile.
     Nicht fuer semantische Zustaende verwenden. */
  --brand:           #FD6050;   /* Panda-Fell — nur Grafik, nie Text */
  --brand-deep:      #BC3C85;   /* Panda-Schatten — Zweitakzent, Diagramme */
  --panda-cheek:     #D2DCFD;   /* Wangen */
  /* Eigener Braunton, NICHT farbgleich mit --negative: sonst sieht die
     Schnauze des Maskottchens aus wie eine Fehlermeldung. */
  --panda-muzzle:    #9A5B4E;
  --panda-mouth:     #7E2F33;   /* offener Mund beim Sprechen */
  --panda-tongue:    #E8776F;
  --panda-ink:       #143C54;   /* Konturen */
  --panda-fur-light: #FFFFFF;   /* helles Fell — Brauen, Schnauzenpartie */
  --momo-tile:       #FCF9F5;   /* Kachel unter Momo, Tinte darauf 11.09:1 */
  /* Zarte Markenflaechen (Halo, Kombi-Chips) duerfen dunkel werden — sie
     tragen Momo nicht, sie umgeben ihn nur. */
  --brand-weak:      light-dark(#FFEDEA, #3A2420);
  --brand-deep-weak: light-dark(#FBEAF3, #35202D);

  /* --- Glas: nur Tab-Leiste, Navigationsleiste, Sheet-Kopf ---------------
     Deckung .90 (bei .85 faellt der Tint ueber Navy auf 4.24:1). Auf Glas
     steht nie --text-muted. Ohne backdrop-filter wird die Flaeche deckend. */
  --glass:           light-dark(rgba(252, 249, 245, .90), rgba(34, 31, 28, .90));
  --glass-blur:      saturate(180%) blur(20px);

  /* --- Typografie (§3) ---------------------------------------------------- */
  /* Systemschrift: SF auf Apple-Geraeten. Keine Webfonts (CSP font-src 'self'). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono nur fuer Code und Befehle — Betraege laufen in --font-sans mit
     tabular-nums. ui-monospace zuerst, damit Safari/iOS die Systemmono nimmt. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Skala 44/34/22/17/15/13/12. Desktop: Fliesstext 15. Auf dem Phone steigt
     er auf 17 (app.css §19 A) — wie bei Apple. */
  --fs-display:   44px;   /* Heldenzahl */
  --fs-h1:        34px;   /* largeTitle */
  --fs-h2:        22px;   /* title2 */
  --fs-h3:        17px;   /* headline, Zeilentitel */
  --fs-body:      15px;
  --fs-body-sm:   13px;
  --fs-label:     13px;   /* footnote: Sektionskopf in Versalien */
  --fs-caption:   12px;   /* Untergrenze */
  --fs-money-lg:  22px;
  --fs-money:     15px;

  --lh-tight:     1.2;
  --lh-body:      1.35;
  --lh-body-sm:   1.35;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;   /* schwerer wird nie gesetzt (§3) */

  /* --- Spacing-Skala (§5) — ausschliesslich diese Werte verwenden --------- */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-72: 72px;

  /* --- Radien ------------------------------------------------------------- */
  --radius-tile:     8px;   /* Icon-Kachel */
  --radius-control: 12px;   /* Felder, Menues, Listeneintraege */
  --radius-card:    20px;   /* Karten, Gruppen, Modal */
  --radius-sheet:   28px;   /* Sheet (nur obere Ecken) */
  --radius-pill:   999px;   /* Knoepfe, Chips, Segmente, Balken */

  /* --- Masse -------------------------------------------------------------- */
  /* Kapselknoepfe 50/44/34, jeder mit mindestens 44px Trefferfeld. */
  --control-h-lg:     50px;
  --control-h:        44px;  /* Buttons, Inputs (§4) */
  --control-h-sm:     34px;
  --control-h-touch:  44px;  /* Touch-Target (§8) */
  --badge-h:          22px;
  --sidebar-w:       232px;
  --sidebar-w-rail:   68px;  /* 768–1099px: Sidebar auf Icons reduziert */
  --content-max:    1100px;
  --reading-max:      70ch;
  /* Schwebende Kapsel: 4 + 52 + 4 = 60px hoch. */
  --tabbar-h:         60px;
  /* Abstand der Kapsel zum unteren Rand: 8px, mit Home-Indikator 12px weniger
     als dessen Safe Area (auf dem iPhone 22px) — die Kapsel ragt wie bei iOS
     in die Zone, der Indikator selbst bleibt frei. */
  --tabbar-unten:     max(var(--sp-8), calc(env(safe-area-inset-bottom, 0px) - var(--sp-12)));

  /* Platz, den die Tab-Leiste unten wegnimmt (Kapsel + Abstand + 8px Luft).
     Wer etwas am unteren Rand verankert — Seiteninhalt, klebende Aktionsleiste,
     schwebender Knopf — rechnet damit und nicht mit eigenen Zahlen. */
  --tabbar-space:  calc(var(--tabbar-h) + var(--tabbar-unten) + var(--sp-8));

  /* Hoehe des Kopfbalkens auf dem Handy: 8 + 44 + 8 + 1px Linie, dazu die
     Safe Area oben. Wer die Vollhoehe rechnet (Momo-Chat), zieht sie ab. */
  --topbar-h: calc(var(--control-h-touch) + var(--sp-8) + 1px
                   + max(var(--sp-8), env(safe-area-inset-top, 0px)));

  /* Zeichenflächenhöhe der Diagramme auf dem Handy (Desktop: aus chart.php). */
  --chart-h-phone:   132px;

  /* --- Elevation (§6) ----------------------------------------------------- */
  /* Im Dunkeln tragen hellere Flaechen die Ebene (--surface-elevated), die
     Schatten bleiben dort nur ein Hauch. */
  --shadow-2:      0 4px 12px rgba(28, 27, 25, 0.07);   /* Dropdown, Popover */
  --shadow-3:      0 16px 40px rgba(28, 27, 25, 0.13);  /* Modal, Sheet */
  --backdrop:      rgba(11, 10, 9, 0.40);               /* Scrim .40 */
  /* Der EINZIGE Schatten der Oberflaeche: die schwebende Tab-Leiste. Die
     Haarlinie traegt die Kante im Dunkeln, wo der Schatten nichts mehr sagt. */
  --shadow-tabbar: 0 0 0 .5px var(--separator), 0 8px 24px rgba(28, 27, 25, 0.12);
  --hover-tint:    light-dark(rgba(28, 27, 25, 0.07), rgba(255, 255, 255, 0.08));

  /* --- Motion (§7: nie länger als 200ms) ---------------------------------- */
  --t-fast: 150ms ease;
  --t-base: 160ms ease;
  --t-slow: 200ms ease;
  /* Sheet: 350ms mit der iOS-Kurve. app.js (closeModal) wartet gleich lang. */
  --t-sheet: 350ms cubic-bezier(.32, .72, 0, 1);

  /* --- Focus (§4) --------------------------------------------------------- */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* Darstellung (App\Core\Darstellung): Automatisch folgt dem System. */
:root[data-darstellung="auto"]   { color-scheme: light dark; }
:root[data-darstellung="dunkel"] { color-scheme: dark; }

/* Ohne backdrop-filter wird Glas deckend — .90 ohne Unschaerfe liesse die
   Schrift darunter durchscheinen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: light-dark(#FCF9F5, #221F1C); }
}

/* Mehr Kontrast (Bedienungshilfen): Trennlinien werden bedeutungstragend. */
@media (prefers-contrast: more) {
  :root {
    --separator:     light-dark(#948774, #8A8076);   /* 3.51:1 */
    --border-strong: light-dark(#7A6E5E, #A69D93);
    --text-muted:    light-dark(#4A545C, #C4BCB2);
  }
}