/* ============================================================
   LeadFinder Design-Tokens (Redesign P1 «Fundament»)
   Quelle: SPEC-ui-redesign.md §3.1c (hell), §3.2 (dunkel),
   §3.3 (Typografie), §3.4 (Spacing), §3.5 (Radius/Elevation/
   z-index/Motion). Werte exakt wie in der Spec (kontrastgerechnet,
   Nachweis: tests/test_kontrast_tokens.py).

   Admin-Overrides (theme_overrides) werden serverseitig in
   base.html als zweiter :root-Block NACH dieser Datei gerendert.
   ============================================================ */

/* ---- Inter, selbst gehostet (SIL OFL, static/fonts/OFL.txt) ----
   Quelle: Inter 4.1 Release (rsms/inter), statische Schnitte,
   mit pyftsubset auf latin + latin-ext + Satzzeichen/Euro
   geschnitten. Verfahren: scripts/subset_inter.sh. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
}

:root {
  /* ==== Farbe — Light (Spec §3.1c) ==== */
  /* Neutral, Text, Linien */
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #e9f1ec;
  --surface-hover: #f1f7f3;
  --text: #17251d;
  --muted: #566b5f;
  --disabled-text: #9aa8b6;
  /* P4-Nachtrag (R5): schwacher Hinweistext ohne Wert (z. B. «kein Score»).
     Heller Wert = der Literalwert #bbb aus app.css VOR P4 — die Zuordnung auf
     --disabled-text hätte die hellen Pixel auf #9aa8b6 verschoben. */
  --text-faint: #bbb;
  --line: #dbe7df;
  --line-field: #74887b;
  --line-strong: #c3d3c8;
  /* Marken-getönter Rand (KPI-Karte «Marke»). Light = bisheriger Literalwert
     #d3e3d7 aus app.css (P4-Nachtrag R5: --line-strong ist neutral #c3d3c8). */
  --brand-line: #d3e3d7;
  /* Interaktiver Rand (Button-/Control-Hover). Light = bisheriger Literalwert
     aus app.css (P4: kein Hex mehr in app.css). */
  --line-hover: #c6d0da;

  /* Marke */
  --brand: #2f6f4b;
  --brand-strong: #245a3c;
  --brand-soft: #e4f1e9;
  --brand-tint: #eef7f2;
  /* Text/Icon auf --brand-Fläche (aktiver Nav-Link, Primär-Buttons) */
  --on-brand: #ffffff;
  /* Dialog-/Drawer-Backdrop (Herkunft: Spec §5 Dialog-Backdrop) */
  --backdrop: rgba(15, 23, 32, 0.45);
  /* P4-Nachtrag (R5): Schleier des Legacy-Modals (.modal-overlay).
     Light = bisheriger Literalwert rgba(0,0,0,0.4) aus app.css. */
  --backdrop-modal: rgba(0, 0, 0, 0.4);

  /* Fokus (bewusst nicht grün) */
  --focus: #1d4ed8;
  --focus-halo: rgba(29, 78, 216, 0.18);

  /* Status */
  --success: #157347;
  --success-soft: #e4f3ea;
  --warn: #a1590a;
  --warn-soft: #fdf1e3;
  --warn-text: #7a4207;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  /* P4-Nachtrag (R5): Fläche des Chips «Verworfen» (.acq-verworfen).
     Light = bisheriger Literalwert #f3e3e1 aus app.css; --danger-soft (#fdeceb)
     hätte die hellen Pixel verschoben und wird an 6 anderen Stellen benutzt
     (Badges/Banner), darf also selbst nicht wandern. */
  --danger-chip-bg: #f3e3e1;
  /* Fehlertext auf --bg/--surface (z. B. .error). Light = bisheriger
     Literalwert aus app.css (P4). */
  --danger-text: #b00020;
  --info: #1d4ed8;
  --info-soft: #e8eefc;
  --review: #6d28d9;
  --review-soft: #efe9fd;
  --neutral-soft: #eef3f0;

  /* Phasen-Bänder (Spec §3.1c): Basis / -soft / -text */
  --phase-open: #5f7d6d;
  --phase-open-soft: #e8efea;
  --phase-open-text: #28402f;
  --phase-active: #2563eb;
  --phase-active-soft: #e5ecfd;
  --phase-active-text: #102a63;
  --phase-offer: #b45309;
  --phase-offer-soft: #f6eae1;
  --phase-offer-text: #4c2304;
  --phase-won: #157347;
  --phase-won-soft: #e3eee9;
  --phase-won-text: #09301e;
  --phase-lost: #b42318;
  --phase-lost-soft: #f6e5e3;
  --phase-lost-text: #4c0f0a;
  /* Spec-Wert #8a94a6 gemessen zu kontrastarm, angepasst (QA-P3b B3):
     #8a94a6 misst 2.73:1 auf --phase-archived-soft / 2.66:1 auf --surface-2,
     WCAG 1.4.11 verlangt >= 3:1. #7f8899 misst 3.19:1 / 3.10:1. */
  --phase-archived: #7f8899;
  --phase-archived-soft: #f1f2f4;
  --phase-archived-text: #3a3e46;

  /* Form-Aliase: nur noch vom eigenen <style>-Block in leads_crm/kanban.html
     referenziert (Umbau P3b); halten die Optik bis dahin stabil. */
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --shadow-1: var(--e-1);
  --shadow-2: var(--e-3);

  /* ==== Typografie (Spec §3.3) ==== */
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-head: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-xs: 12px;   --lh-xs: 16px;
  --fs-sm: 13px;   --lh-sm: 18px;
  --fs-base: 14px; --lh-base: 20px;
  --fs-md: 16px;   --lh-md: 24px;
  --fs-lg: 20px;   --lh-lg: 28px;
  --fs-xl: 24px;   --lh-xl: 32px;
  --fs-2xl: 32px;  --lh-2xl: 40px;

  /* ==== Spacing (Spec §3.4) ==== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --pad-control: 8px 12px;
  --pad-card: 20px;
  --pad-cell: 10px 12px;

  /* ==== Radius (Spec §3.5) ==== */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ==== Elevation (Spec §3.5) ==== */
  --e-0: none;
  --e-1: 0 1px 3px rgba(23, 37, 29, 0.07), 0 3px 10px rgba(23, 37, 29, 0.05);
  --e-2: 0 6px 20px rgba(23, 37, 29, 0.10);
  --e-3: 0 16px 40px rgba(23, 37, 29, 0.16);
  /* Elevation schwebender Ebenen (Menüs/Dialoge). Light = die bisherigen
     Literalwerte aus app.css (P4: keine literalen schwarzen Schatten mehr).
     --e-0..--e-3 sind die Skala für Karten/Hover; diese drei Rollen sind
     nur für Aufklapp-Menüs (.admin-dropdown/.user-menu/.kanton-menu),
     den Legacy-Modal-Dialog und die In-Cell-Overlays. */
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* ==== z-index (Spec §3.5) ==== */
  --z-sticky: 200;
  /* Sticky Spaltenkopf INNERHALB eines Scroll-Containers (Kanban-Board, #81):
     liegt ueber den Karten der eigenen Spalte, aber unter Topbar/Overlays. */
  --z-sticky-cell: 100;
  --z-dropdown: 300;
  --z-panel: 400;
  --z-backdrop: 490;
  --z-modal: 500;
  --z-toast: 600;
  /* Verschachtelte Bestaetigung (toast.js confirmAction) ueber ALLEM, auch
     ueber dem Legacy-Overlay .modal-overlay (app.css, z-index 1000): ein
     Bestaetigungs-Dialog, der aus einem offenen Modal heraus geoeffnet wird
     («Eingaben verwerfen?» im Neuer-Lead-Dialog), war sonst nicht klickbar
     (QA-Fund P3c2c F1). */
  --z-confirm: 1100;

  /* ==== Motion (Spec §3.5) ==== */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==== Farbe — Dark (Spec §3.2, vorbereitet; Umschalter = P4) ====
   Überschreibt ausschliesslich Farbrollen. Kontraste nachgerechnet
   (tests/test_kontrast_tokens.py, Theme «dark»). */
[data-theme="dark"] {
  --bg: #12171d;
  --surface: #191f27;
  --surface-2: #222a34;
  --surface-hover: #232b35;
  --text: #e6ebf1;
  --muted: #9fb0c0;
  --disabled-text: #5c6b7d;
  /* P4-Nachtrag (R5): Dunkelwert der P4-Rollen — jeweils der Wert, den die
     zuvor gewählte Systemrolle im Dunkelmodus liefert, damit die dunkle
     Gestaltung unverändert bleibt. */
  --text-faint: #5c6b7d;
  --line: #2c3743;
  --line-field: #6b7d90;
  --line-strong: #3a4653;
  --brand-line: #3a4653;
  --line-hover: #3a4653;

  --brand: #4f9e75;
  --brand-strong: #6cb48d;
  --brand-soft: #1d2b23;
  --brand-tint: #16211b;
  /* Text/Icon auf --brand-Fläche: im Dunkelmodus ist --brand hell (#4f9e75),
     weisse Schrift ergaebe hier nur ~2:1 — Spec §3.2 fordert #0b1a12 (5,5:1). */
  --on-brand: #0b1a12;

  --focus: #7aa2f7;
  --focus-halo: rgba(122, 162, 247, 0.22);

  --success: #5fbf8a;
  --success-soft: #17342a;
  --warn: #e0a75e;
  --warn-soft: #3a2a14;
  --warn-text: #f0c896;
  --danger: #f08a80;
  --danger-soft: #3d1d1a;
  --danger-chip-bg: #3d1d1a;
  --danger-text: #f08a80;
  --info: #8ab4f8;
  --info-soft: #1d2b4a;
  --review: #c4a8f5;
  --review-soft: #2b2140;
  --neutral-soft: #232b35;

  --phase-open: #8aa396;
  --phase-open-soft: #22302a;
  --phase-open-text: #cfe0d6;
  --phase-active: #7fa4f5;
  --phase-active-soft: #1a2a4d;
  --phase-active-text: #c2d4fb;
  --phase-offer: #e0975a;
  --phase-offer-soft: #3a2410;
  --phase-offer-text: #f2cda8;
  --phase-won: #5fbf8a;
  --phase-won-soft: #123124;
  --phase-won-text: #b8e3cb;
  --phase-lost: #f08a80;
  --phase-lost-soft: #3d1d1a;
  --phase-lost-text: #f5c3bd;
  --phase-archived: #9aa6b8;
  --phase-archived-soft: #262b33;
  --phase-archived-text: #c9d1dc;

  /* ==== Elevation (Spec §3.2): im Dunkelmodus traegt die Flaechen-
     helligkeit die Tiefe, nicht der Schatten. app.css benutzt genau
     var(--e-1)/var(--e-2)/var(--e-3) — diese werden hier neutralisiert.
     Schwebende Ebenen (Menues/Dialoge) behalten einen schwachen,
     fast unsichtbaren Schatten, damit sie sich abheben. ==== */
  --e-0: none;
  --e-1: none;
  --e-2: none;
  --e-3: none;
  --shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);

  /* Backdrop im Dunkelmodus: staerker, damit der Dialog Vordergrund bleibt. */
  --backdrop: rgba(0, 0, 0, 0.6);
  --backdrop-modal: rgba(0, 0, 0, 0.6);
}

/* Reduced Motion (Spec §3.5) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}