/*
 * clarimo-tokens.css
 * Single Source of Truth für alle Design-Entscheidungen.
 *
 * REGEL: Niemals Hex-Farben, px-Werte oder Schriftgrößen
 * direkt im Code verwenden. Immer diese Variablen nutzen.
 *
 * Importieren mit:
 *   <link rel="stylesheet" href="/static/css/clarimo-tokens.css">
 *   oder: @import 'clarimo-tokens.css';
 *
 * SCHRIFT: dieses File ist der EINZIGE Ort, der Schrift laedt und benennt
 * (Founder-Entscheid α 2026-09-25). Alle anderen Stellen nutzen
 * var(--cl-font) / var(--cl-font-mono); Canvas (ECharts/Cytoscape) liest
 * den Token per clFontFamily() aus echarts-helpers.js. Waechter:
 * scripts/check_font_family_tokens.py (blockend). Gewichte als variabler
 * Bereich 400..700: das Design-System nutzt 400/500, der Bestand traegt noch
 * 600/700 — ohne geladenen Schnitt faelscht der Browser Fett (Faux-Bold).
 *
 * LADEN: lokal aus static/vendor/geist/ (variable woff2, Achse 100..900,
 * npm `geist` 1.8.1, OFL — LICENSE.txt daneben). Kein Google-Fonts-@import:
 * ein externer Abruf im <head> haengt die Seite, wenn das Netz fehlt
 * (Founder-Entscheid E5 α 2026-10-20). Waechter:
 * tests/architecture/test_no_external_frontend_assets.py.
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/geist/Geist-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/geist/GeistMono-Variable.woff2') format('woff2');
}

:root {

  /* ─────────────────────────────────────────
   * FARBEN — Brand
   * ───────────────────────────────────────── */

  --cl-green:          #1a9b6c;   /* Primär — CTAs, aktive Elemente, Icons */
  --cl-green-mid:      #5dcaa5;   /* Sekundär — Akzente, Hover-States */
  --cl-green-light:    #9fe1cb;   /* Tertiär — sehr dezente Akzente */
  --cl-green-bg:       #eef7f3;   /* Hintergrund — Hover, aktive Rows, Badges */
  --cl-green-border:   #c8e8dc;   /* Rahmen — Karten, Inputs im Fokus */
  --cl-green-dark:     #158a5e;   /* Hover auf Primär-Buttons */
  --cl-green-bg-hover: #ddf0e9;   /* Hover auf Sekundär-Buttons (vorher Hex in .cl-btn-secondary) */

  /* ─────────────────────────────────────────
   * FARBEN — Text
   * ───────────────────────────────────────── */

  --cl-text-1:  #181816;   /* Primärtext — Überschriften, wichtige Werte */
  --cl-text-2:  #706f69;   /* Sekundärtext — Metadaten, Labels, Subtitles */
  --cl-text-3:  #b0afa8;   /* Tertiärtext — Hints, Platzhalter, disabled */

  /* ─────────────────────────────────────────
   * FARBEN — Status / Semantisch
   * ───────────────────────────────────────── */

  --cl-red:         #e8604a;   /* Fehler, Löschen, negativ */
  --cl-red-bg:      #fcebeb;
  --cl-red-border:  #f7c1c1;
  --cl-red-bg-hover: #f9d5d5;   /* Hover auf Lösch-Buttons (vorher Hex in .cl-btn-danger) */

  --cl-amber:         #f5a623;   /* Warnung, Entwurf, ausstehend */
  --cl-amber-bg:      #faeeda;
  --cl-amber-border:  #f5d99a;
  --cl-amber-text:    #854f0b;

  --cl-blue:         #378add;   /* Info, neutral, kumulierte Werte */
  --cl-blue-bg:      #e6f1fb;
  --cl-blue-border:  #b5d4f4;
  --cl-blue-text:    #185fa5;

  /* Serie / Prinzip — der EINE semantische Ton fuer Dauerzahlungen und ihre
   * Prinzip-Entscheidung (Founder 2026-09-24: „Serien bzw. Prinzip-
   * Entscheidungen durchgängig blau"). Er zeigt auf Blau, ist aber ein
   * eigener Name: wer eine Serie zeichnet (Muster-Zeile, Prinzip-Karte,
   * Serien-Badge der Liste, Serien-Ton der Schale), liest DIESEN Token, nicht
   * `--cl-blue` — so bleibt „Serie" von „Info/neutral" unterscheidbar, und
   * eine spaetere Umfaerbung ist eine Zeile. */
  --cl-serie:        var(--cl-blue);
  --cl-serie-bg:     var(--cl-blue-bg);
  --cl-serie-border: var(--cl-blue-border);
  --cl-serie-text:   var(--cl-blue-text);

  /* KI-Akzent — Vorschlag, Ghost-Fill, Sparkle. Reserviert fuer Dinge, die
   * die Maschine VORSCHLAEGT und der Mensch noch bestaetigen muss; niemals
   * fuer bestaetigte Werte. Aus dem abgenommenen Buchungseditor-Design
   * (`_design_outputs/design_handoff_buchungseditor/README.md` §Design
   * Tokens, Founder-Abnahme 2026-07-31, ADR-193 K19).
   * Hinweis: Bestand-Surfaces (journal.js, txns-page.js) tragen historisch
   * `#8b5cf6` als KI-Lila — bekannte Drift, Sweep ist ein eigener Vorgang. */
  --cl-ai:           #7a4fce;
  --cl-ai-bg:        #faf7fe;
  --cl-ai-border:    #b79be0;

  /* ─────────────────────────────────────────
   * FARBEN — Hintergründe
   * ───────────────────────────────────────── */

  --cl-bg-primary:    #ffffff;
  --cl-bg-secondary:  #fafaf8;   /* Seiten-Hintergrund, Modal-Header/Footer */
  --cl-bg-tertiary:   #f3f2ee;   /* Hover, sehr subtile Trennung */

  /* ─────────────────────────────────────────
   * FARBEN — Linien & Rahmen
   * ───────────────────────────────────────── */

  --cl-border:          rgba(0, 0, 0, 0.08);    /* Standard — alle Trennlinien */
  --cl-border-subtle:   rgba(0, 0, 0, 0.04);    /* Sehr dezent — Zeilen in Listen */
  --cl-border-medium:   rgba(0, 0, 0, 0.15);    /* Medium — Karten, Inputs */
  --cl-border-strong:   rgba(0, 0, 0, 0.25);    /* Stark — Hover auf Borders */

  /* Als fertige border-Shorthand-Werte */
  --cl-line:          0.5px solid var(--cl-border);
  --cl-line-subtle:   0.5px solid var(--cl-border-subtle);
  --cl-line-medium:   0.5px solid var(--cl-border-medium);

  /* ADR-206/W5 — Ring-/Balken-Track (leerer Teil), Header-Ringe +
   * Popover-Kategorie-Balken (TOKEN_MAPPING.md, Design-Bundle
   * _design_outputs/adr206-w5-header-ringe/). */
  --cl-ring-track:    rgba(0, 0, 0, 0.07);

  /* ─────────────────────────────────────────
   * TYPOGRAFIE
   * ───────────────────────────────────────── */

  --cl-font:       'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --cl-font-mono:  'Geist Mono', 'SF Mono', monospace;

  /* Schriftgrößen */
  --cl-text-2xs:  10px;   /* Labels, Timestamps, Uppercase-Kategorie */
  --cl-text-xs:   11px;   /* Badges, Hints, Captions */
  --cl-text-sm:   12px;   /* Sekundäre Metadaten, Katalog-Items */
  --cl-text-md:   13px;   /* Standardtext in Listen, Formulare */
  --cl-text-base: 14px;   /* Body-Text, Buttons */
  --cl-text-lg:   15px;   /* Wichtige Labels, Sub-Headings */
  --cl-text-xl:   16px;   /* Kundennamen, Sektions-Titel */
  --cl-text-2xl:  18px;   /* Seiten-Titel */
  --cl-text-3xl:  22px;   /* KPI-Werte, Summen */
  --cl-text-4xl:  28px;   /* Dashboard-Hauptzahlen */

  /* Schriftgewichte — NUR diese zwei */
  --cl-weight-normal: 400;
  --cl-weight-medium: 500;
  /* Niemals 600, 700 oder bold — wirkt zu schwer */

  /* Zeilenabstände */
  --cl-leading-tight:   1.25;
  --cl-leading-normal:  1.5;
  --cl-leading-relaxed: 1.7;

  /* Letter-Spacing für Labels */
  --cl-tracking-label: 0.07em;   /* Uppercase-Labels: 10-11px */

  /* ─────────────────────────────────────────
   * ABSTÄNDE
   * ───────────────────────────────────────── */

  --cl-space-1:   4px;
  --cl-space-2:   8px;
  --cl-space-3:  12px;
  --cl-space-4:  16px;
  --cl-space-5:  20px;
  --cl-space-6:  24px;
  --cl-space-8:  32px;
  --cl-space-10: 40px;
  --cl-space-12: 48px;

  /* Semantische Aliases */
  --cl-padding-card:    var(--cl-space-5);    /* 20px — Karten-Innenabstand */
  --cl-padding-section: var(--cl-space-4);    /* 16px — Sections */
  --cl-padding-row:     8px var(--cl-space-5); /* Listenzeilen */
  --cl-gap-sm:  var(--cl-space-2);   /* 8px — enge Abstände */
  --cl-gap-md:  var(--cl-space-3);   /* 12px — Standard */
  --cl-gap-lg:  var(--cl-space-4);   /* 16px — großzügig */

  /* ─────────────────────────────────────────
   * BORDER-RADIUS
   * ───────────────────────────────────────── */

  --cl-radius-xs:   4px;    /* Inline-Elemente, kleine Badges */
  --cl-radius-sm:   6px;    /* Buttons small, Tags */
  --cl-radius-md:   8px;    /* Buttons, Inputs, kleine Karten */
  --cl-radius-lg:  12px;    /* Karten, Panels */
  --cl-radius-xl:  16px;    /* Modals, große Container */
  --cl-radius-pill: 20px;   /* Pills, Tags, Konfidenz-Badges */

  /* ─────────────────────────────────────────
   * SCHATTEN
   * ───────────────────────────────────────── */

  /* Keine dekorativen Schatten — nur für Elevation/Overlays */
  --cl-shadow-card:   0 1px 4px rgba(0,0,0,0.04);
  --cl-shadow-modal:  0 8px 40px rgba(0,0,0,0.12),
                      0 2px 8px rgba(0,0,0,0.06);
  --cl-shadow-dropdown: 0 4px 16px rgba(0,0,0,0.08);
  --cl-shadow-focus:  0 0 0 3px rgba(26, 155, 108, 0.2);

  /* ─────────────────────────────────────────
   * TRANSITIONS
   * ───────────────────────────────────────── */

  --cl-transition-fast:   0.1s ease;
  --cl-transition-normal: 0.15s ease;
  --cl-transition-slow:   0.2s ease;

  /* ─────────────────────────────────────────
   * Z-INDEX STACK
   * ───────────────────────────────────────── */

  --cl-z-base:      1;
  --cl-z-dropdown: 100;
  --cl-z-sticky:   200;
  /* Modals MUESSEN ueber dem High-Layer-UI liegen: .chat-sidebar=9000
   * (shared.css, Kommentar "unter Modals 10000+") + .csm-overlay=9999
   * (connector-setup-modal.css). Vor 2026-06-07 lagen die Token-Modals
   * auf 300/400/500 und wurden dadurch von Chat-Sidebar + Setup-Modal
   * verdeckt — z.B. stapelten sich showConfirm-Dialoge ("Setup abbrechen?")
   * unsichtbar HINTER dem Connector-Setup-Modal. Interne Reihenfolge
   * (overlay < modal < toast) bleibt erhalten, nur das Band wandert
   * geschlossen ueber 9999. */
  --cl-z-overlay:  10000;  /* Modal-Hintergrund (ueber chat-sidebar 9000 + csm 9999) */
  --cl-z-modal:    10001;  /* Modal selbst */
  /* ADR-192 K7 — Toasts liegen ueber dem GANZEN Modal-Stapel, nicht nur ueber
     einem einzelnen Modal. `claModal.open()` vergibt gestapelte z-indexe ab
     --cl-z-overlay in Schritten von --cl-z-modal-step; bei 10010 haette der
     zweite Stapel-Eintrag den Toast bereits verdeckt. Der Abstand laesst ~99
     Modal-Ebenen Platz, bevor er kollidiert. */
  --cl-z-modal-step: 10;   /* Abstand zweier Stapel-Ebenen (claModal) */
  --cl-z-toast:    11000;  /* Toasts, Notifications (ueber dem Modal-Stapel) */

  /* ─────────────────────────────────────────
   * CHART-FARBEN (ECharts)
   * ───────────────────────────────────────── */

  --cl-chart-1: #1a9b6c;   /* Einnahmen, positiv */
  --cl-chart-2: #e8604a;   /* Ausgaben, negativ */
  --cl-chart-3: #378add;   /* Kumuliert, neutral */
  --cl-chart-4: #f5a623;   /* Warnung, ausstehend */
  --cl-chart-5: #8b5cf6;   /* Kategorie 5 */
  --cl-chart-6: #ec4899;   /* Kategorie 6 */
  --cl-chart-7: #06b6d4;   /* Kategorie 7 */
  --cl-chart-8: #84cc16;   /* Kategorie 8 */

  /* Chart-Achsen & Grid */
  --cl-chart-axis:   rgba(0,0,0,0.08);
  --cl-chart-grid:   rgba(0,0,0,0.04);
  --cl-chart-label:  #b0afa8;
}

/* Schrift-Basis. :where() hat Spezifitaet 0 — jede Seiten- oder
 * Komponenten-Regel gewinnt. Formular-Elemente erben die Schrift sonst NICHT
 * (Browser-Default Arial/13.33px, gemessen auf /documents/statements). */
:where(body) { font-family: var(--cl-font); }
:where(button, input, select, textarea) { font: inherit; line-height: normal; }

/* ─────────────────────────────────────────
 * DARK MODE — DEAKTIVIERT
 * Clarimo ist immer hell. Dark Mode verursacht inkonsistente
 * Darstellung weil nicht alle Komponenten (cluster-list, sug-abo etc.)
 * Dark-Mode-Variablen nutzen. Falls Dark Mode jemals aktiviert wird,
 * muessen ALLE Komponenten vollstaendig angepasst werden.
 * ───────────────────────────────────────── */

/* @media (prefers-color-scheme: dark) { — DEAKTIVIERT } */