/* =============================================================================
   Design Tokens — SchuhkartonAgent
   Hybrid: Struktur + Status-Paare kommen aus dem Repo (fix, von Tests referenziert).
   Brand-Farben, Spacing-Feintuning, Typografie-Skala = Design-Vorschlag, flexibel.
   =============================================================================
   Regel: "Im Zweifel ein neuer Token." Keine Hex-Werte außerhalb dieser Datei.
   Struktur:
     1. Primitives — rohe Werte. Nur im Semantic-Layer referenzieren.
     2. Semantic — Zweck-Tokens. Komponenten nutzen ausschließlich diese.
     3. Dark-Mode — [data-theme="dark"]-Overrides auf Semantic-Ebene.
   ============================================================================= */

:root {
  /* ── 1. Primitives — Grayscale (Slate) ──────────────────────── */
  /* FIX (Repo): Namen und Werte sind stabil. Als kühles Chassis ausgewählt. */
  --white:     #FFFFFF;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── 1. Primitives — Status-Farben (FIX, Repo-Wahrheit) ─────── */
  /* Diese Werte sind von Tests + Badge-Logik referenziert. NICHT ändern. */
  /* Blau-Skala wurde entfernt — früher Primary-Farbe, nach Rebrand nirgends
     mehr semantisch referenziert (Status „Exportiert", Info-Alert und Link
     nutzen jetzt Slate, um Terrakotta als einzige Akzent-Farbe zu behalten). */

  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-500: #16A34A;
  --green-700: #166534;

  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-500: #F59E0B;
  --amber-700: #92400E;

  --red-100:   #FEE2E2;
  --red-200:   #FECACA;
  --red-500:   #DC2626;
  --red-700:   #B91C1C;
  --red-900:   #7F1D1D;

  --violet-100: #EDE9FE;
  --violet-500: #7C3AED;

  /* ── 1. Primitives — Brand (Design-Vorschlag, FLEXIBEL) ─────── */
  /* Terrakotta als warmer Akzent zum kühlen Slate-Chassis.
     Aus Brand-Briefing: „Sorgfalt einer deutschen Werkstatt". */
  --terrakotta-50:   #FEF3E7;
  --terrakotta-100:  #FDE4CC;
  --terrakotta-300:  #F2975F;   /* Dark-Mode Primary-Hover */
  --terrakotta-400:  #E8824A;   /* Dark-Mode Primary */
  --terrakotta-500:  #EA580C;   /* Hover-Akzent auf hellen Flächen */
  --terrakotta-600:  #C2410C;   /* Primary Brand */
  --terrakotta-700:  #9A3412;
  --terrakotta-900:  #78350F;

  /* Paper-Weiß: leicht wärmer als slate-50, für Landing-Body-Flächen. */
  --paper:       #FBF9F5;

  /* ── 2. Semantic — Farben (FLEXIBEL) ────────────────────────── */
  /* Primary ist jetzt Terrakotta. Blau rutscht auf "Info / Link" runter. */
  --color-primary:       var(--terrakotta-600);
  --color-primary-hover: var(--terrakotta-700);
  --color-primary-soft:  var(--terrakotta-50);

  /* Sekundär / Link / Info — bewusst entsättigt (Slate), damit Terrakotta
     als einzige Akzent-Farbe wirkt. Kein Blau im Primary-Kontext. */
  --color-link:          var(--slate-700);
  --color-link-hover:    var(--slate-900);

  --color-bg-app:   var(--slate-50);
  --color-bg-card:  var(--white);
  --color-bg-paper: var(--paper);   /* Landing-Body, Hero, Sektionen */
  --color-bg-zebra: var(--slate-50);
  --color-bg-hover: var(--slate-100);
  --color-bg-ink:   var(--slate-900);

  --color-text-primary:   var(--slate-800);
  --color-text-secondary: var(--slate-500);
  --color-text-muted:     var(--slate-400);
  --color-text-inverted:  var(--white);
  --color-text-accent:    var(--terrakotta-600);

  --color-success:       var(--green-500);
  --color-warning:       var(--amber-500);
  --color-error:         var(--red-500);
  --color-error-hover:   var(--red-700);
  --color-in-progress:   var(--violet-500);

  --color-border:        var(--slate-200);
  --color-border-hover:  var(--slate-300);
  --color-border-strong: var(--slate-300);

  /* Status-Paare Fg/Bg — FIX, Repo-Wahrheit. Mappen auf Spec §1b Lifecycle. */
  --status-offen-fg: var(--slate-600);
  --status-offen-bg: var(--slate-100);

  --status-in-analyse-fg: var(--violet-500);
  --status-in-analyse-bg: var(--violet-100);

  --status-fertig-fg: var(--green-700);
  --status-fertig-bg: var(--green-100);

  /* „Exportiert" war im Repo blau — wir nutzen Slate-Dark, um Blau komplett
     aus dem Primary-Kontext rauszunehmen. Lifecycle-Sinn bleibt: 
     neutral-abgeschlossen statt aktiv-warnend. */
  --status-exportiert-fg: var(--slate-700);
  --status-exportiert-bg: var(--slate-200);

  --status-geaendert-fg: var(--amber-700);
  --status-geaendert-bg: var(--amber-100);
  /* Alias, falls Templates die Compound-Form verwenden (exportiert + geändert). */
  --status-exportiert-geaendert-fg: var(--amber-700);
  --status-exportiert-geaendert-bg: var(--amber-100);

  /* Alert-Paare Fg/Bg. */
  --alert-error-fg:   var(--red-900);
  --alert-error-bg:   var(--red-100);
  --alert-warning-fg: var(--amber-700);
  --alert-warning-bg: var(--amber-100);
  --alert-success-fg: var(--green-700);
  --alert-success-bg: var(--green-100);
  --alert-neutral-fg: var(--slate-600);
  --alert-neutral-bg: var(--slate-100);
  --alert-info-fg:    var(--slate-700);
  --alert-info-bg:    var(--slate-100);

  --alert-error-border:   var(--red-200);
  --alert-warning-border: var(--amber-200);
  --alert-success-border: var(--green-200);
  --alert-info-border:    var(--slate-300);

  /* Focus-Ring — Terrakotta statt Blau. */
  --shadow-focus: 0 0 0 3px rgba(194, 65, 12, 0.18);

  /* ── 2. Semantic — Typografie ───────────────────────────────── */
  /* FIX: Fonts sind im Repo selbst-gehostet (Plus Jakarta Sans + DM Sans). */
  --font-headline: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", sans-serif;
  --font-body:     "DM Sans", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Skala — Repo-Basis erweitert nach oben für Landing-Display. */
  --font-size-display-xl: 64px;   /* Landing H1, Desktop */
  --font-size-display:    48px;   /* Landing H1, Tablet */
  --font-size-h1:         24px;   /* App H1 */
  --font-size-h2:         18px;   /* App H2 + Landing Trust-Card H3 */
  --font-size-h3:         16px;
  --font-size-body:       14px;   /* App default */
  --font-size-body-lg:    17px;   /* Landing body */
  --font-size-label:      13px;
  --font-size-hint:       12px;
  --font-size-xs:         11px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --line-height-tight:   1.1;
  --line-height-snug:    1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* ── 2. Semantic — Spacing (4px-Grid, FIX) ──────────────────── */
  --spacing-0:  0;
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  --spacing-field:   var(--spacing-3);
  --spacing-card:    var(--spacing-5);
  --spacing-section: var(--spacing-4);
  --spacing-content: var(--spacing-6);

  /* ── 2. Semantic — Border-Widths ────────────────────────────── */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-5: 5px;

  /* ── 2. Semantic — Radien ───────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 9999px;

  /* ── 2. Semantic — Schatten ─────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:   0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl:   0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);

  --color-backdrop: rgba(15, 23, 42, 0.4);

  /* PDF-Viewer Dark-Theme. */
  --color-pdf-viewer-bg:      #525659;
  --color-pdf-viewer-toolbar: #323639;
  --color-pdf-viewer-border:  #333333;

  /* ── 2. Semantic — Z-Index (FIX, Repo-Wahrheit) ─────────────── */
  --z-base:           1;
  --z-sticky:         100;
  --z-dropdown:       200;
  --z-sidebar:        300;
  --z-modal-backdrop: 1000;
  --z-modal:          1010;
  --z-slideover:      1020;
  --z-toast:          1100;

  /* ── 2. Semantic — Sizes (FIX, Repo-Wahrheit) ───────────────── */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;

  --btn-height:       40px;
  --btn-height-sm:    32px;
  --table-row-height: 48px;
  --min-click-area:   40px;

  --sidebar-width:        240px;
  --sidebar-width-closed: 56px;
  --header-height:        56px;

  --content-max-width:    1280px;
  --landing-max-width:    1120px;

  /* ── 2. Semantic — Transitions ──────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ══════════════════════════════════════════════════════════════
     DATEV-Chrome Tokens — dichte Buchhalter-Maske
     Warme Beige-Skala statt kühlem Slate für Header/Toolbar/Statusbar;
     Status-Bänder (Fehler/Hinweis/OK); dichte Schrift (11px/10px);
     Consolas als offizieller Numeric-Font für Zahlen und Codes.
     Diese Tokens sind additiv — Semantic-Tokens oben bleiben unberührt,
     DATEV-Seiten referenzieren gezielt --dv-*.
     ══════════════════════════════════════════════════════════════ */

  /* Warme Neutrals (Beige, FIX nach Brand-Entscheidung) */
  --beige-50:  #FBFAF3;
  --beige-100: #F5F4EE;
  --beige-200: #ECEAD8;
  --beige-300: #DFDCC6;
  --beige-400: #B8B49F;
  --beige-500: #8A8670;
  --beige-600: #5A5740;
  --beige-700: #3A3828;

  /* Selektionsgelb (aktive Buchungszeile) */
  --dv-select-bg:     #FFF4B8;
  --dv-select-border: #D4A400;
  --dv-hover-bg:      #FFFBE8;

  /* Status-Band-Hintergründe (Triage-Divider) */
  --dv-band-fehler-from: #F4D4CB;
  --dv-band-fehler-to:   #E8B8AA;
  --dv-band-fehler-fg:   #7A1818;
  --dv-band-hinweis-from: #F5E8C4;
  --dv-band-hinweis-to:   #E8D49A;
  --dv-band-hinweis-fg:   #7A5818;
  --dv-band-ok-from: #DCE8D8;
  --dv-band-ok-to:   #C0D4BC;
  --dv-band-ok-fg:   #2A4E18;

  /* Inline-Hint-Row (direkt unter betroffener Zeile) */
  --dv-hint-fehler-bg:     #FBEEE9;
  --dv-hint-fehler-accent: #B22222;
  --dv-hint-hinweis-bg:     #FDF5E0;
  --dv-hint-hinweis-accent: #C89838;

  /* Zeilenhintergrund bei Fehler/Hinweis (dezent getönt) */
  --dv-row-fehler-bg:        #FBEEE9;
  --dv-row-fehler-bg-even:   #F9E5DD;
  --dv-row-hinweis-bg:       #FDF9EE;
  --dv-row-hinweis-bg-even:  #FAF3E0;
  --dv-row-approved-bg:      #E9F3EC;
  --dv-row-discarded-bg:     #EAEAEA;
  --dv-row-zebra:            #FAFAF2;
  --dv-row-border:           #E6E4D6;
  --dv-row-border-cell:      #EDEBDD;

  /* Chrome-Flächen */
  --dv-chrome-from:    #F5F4EE;
  --dv-chrome-to:      #E8E6D8;
  --dv-toolbar-from:   #ECEAD8;
  --dv-toolbar-to:     #DFDCC6;
  --dv-chrome-border:  #B8B49F;
  --dv-chrome-ink:     #1A1A1A;
  --dv-chrome-muted:   #555;

  /* Buttons im Chrome (Header/Toolbar/Hint) */
  --dv-btn-from: #FCFCFA;
  --dv-btn-to:   #E8E6D8;
  --dv-btn-border: #8A8670;

  --dv-btn-primary-from: #5A8A3A;
  --dv-btn-primary-to:   #3E6A24;
  --dv-btn-primary-border: #2A4E18;

  --dv-btn-info-from: #5A7FA8;
  --dv-btn-info-to:   #3E5F85;
  --dv-btn-info-border: #2A4360;

  /* Preview-Panel (Belegbild) */
  --dv-preview-title-from: #4A6A85;
  --dv-preview-title-to:   #34506A;
  --dv-preview-body-bg:    #4A5560;
  --dv-preview-chrome-bg:  #E8E6D8;

  /* Typografie für dichte Maske */
  --dv-font-ui:      "Segoe UI", Tahoma, Arial, sans-serif;
  --dv-font-numeric: "Consolas", "Courier New", ui-monospace, monospace;

  --dv-size-table:  11px;   /* Tabellenzelle, Buchungszeile */
  --dv-size-header: 12px;   /* Header-Zeile, Toolbar-Text */
  --dv-size-title:  13px;   /* Titel-Zeile */
  --dv-size-micro:  10px;   /* Spaltenkopf, Statusbar */
  --dv-size-nano:    9px;   /* Belegbild-Paper, Hint-Code */

  /* Zeilenhöhen (dicht) */
  --dv-row-h:        22px;
  --dv-row-h-split:  20px;
  --dv-header-h:     30px;
  --dv-toolbar-h:    26px;
  --dv-statusbar-h:  22px;

  /* Densität — Tweak-fähig via [data-density] */
  --dv-cell-pad-y: 4px;
  --dv-cell-pad-x: 6px;

  /* Focus-Ring im DATEV-Chrome (dezenter, nicht Terrakotta) */
  --dv-focus-ring: 0 0 0 2px #FFD54A;

  /* Button-Hover-Gradient-Stops */
  --dv-btn-hover-to:           #EDEBDC;
  --dv-btn-primary-hover-from: #6AA048;
  --dv-btn-primary-hover-to:   #4A7A2C;
  --dv-btn-info-hover-from:    #6890BA;
  --dv-btn-info-hover-to:      #48709A;
  --dv-btn-danger-from:        #C44A3A;
  --dv-btn-danger-to:          #9A2A1E;
  --dv-btn-danger-border:      #6A1A12;
  --dv-btn-icon-hover-bg:      #D4ECD0;
  --dv-btn-kbd-bg:             rgba(0, 0, 0, 0.12);
  --dv-btn-kbd-bg-primary:     rgba(255, 255, 255, 0.22);

  /* Zeilen- und Editor-Details */
  --dv-row-missing-bg:   #FFE8E0;
  --dv-edit-input-ring:  rgba(212, 164, 0, 0.2);
  --dv-split-row-bg:     #F4F2E4;
  --dv-split-row-text:   #444;
  --dv-split-row-border: #E0DECF;

  /* Inline-Hint-Row */
  --dv-hint-row-bg:  #FDFAF0;
  --dv-hint-msg-fg:  #333;
  --dv-hint-code-fg: #888;

  /* Preview-Panel (Paper-Elemente) */
  --dv-preview-shadow:              rgba(0, 0, 0, 0.4);
  --dv-preview-paper-fg:            #333;
  --dv-preview-paper-sub:           #666;
  --dv-preview-paper-divider:       #ccc;
  --dv-preview-paper-dt:            #888;
  --dv-preview-paper-dd:            #222;
  --dv-preview-paper-total-border:  #333;

  /* Statusbar-kbd */
  --dv-statusbar-kbd-fg: #222;

  /* Freigabe-Modal */
  --dv-modal-backdrop: rgba(15, 23, 42, 0.35);
  --dv-modal-bg-from:  #FAF9F2;
  --dv-modal-bg-to:    #F0EEDA;
  --dv-modal-shadow:   rgba(15, 23, 42, 0.45);

  /* ══════════════════════════════════════════════════════════════
     Triage-Prüfungs-Ansicht (alternative Sicht zu DATEV-Chrome)
     Drei-Band-Layout Fehler/Hinweis/OK, eigenständige Pastell-
     Palette (wärmer als Slate, aber entsättigter als DATEV-Beige).
     ══════════════════════════════════════════════════════════════ */

  --triage-fehler-border:  #E6B2A5;
  --triage-fehler-bg:      #FBEEE9;
  --triage-fehler-glyph:   #C2634A;
  --triage-fehler-shadow:  rgba(194, 99, 74, 0.06);
  --triage-fehler-hint-bg: #FDF5F1;

  --triage-hinweis-border:  #E8D4A0;
  --triage-hinweis-bg:      #FAF3E3;
  --triage-hinweis-glyph:   #B78A3F;
  --triage-hinweis-hint-bg: #FDF9EE;

  --triage-ok-glyph:     #4A7C59;
  --triage-row-approved: #E9F3EC;
  --triage-row-focus:    #FDF8EC;
  --triage-neutral-bg:   #FAFAF7;

  /* Transparenz-Overlays für farbige Hintergründe (Sidebar-Links etc.) */
  --triage-overlay-10: rgba(255, 255, 255, 0.10);
  --triage-overlay-15: rgba(255, 255, 255, 0.15);
  --triage-overlay-18: rgba(255, 255, 255, 0.18);
  --triage-overlay-30: rgba(255, 255, 255, 0.30);

  /* ══════════════════════════════════════════════════════════════
     Karton-Card — Deckel-Effekt (Handoff §2.5)
     Warme Beige-Skala für den Karton-Deckel, passt zum Terrakotta-
     Primary. Werte aus dem UI-Kit (ui_kits/app/app.css).
     ══════════════════════════════════════════════════════════════ */
  --karton-lid-bg:       #E8D5B7;
  --karton-lid-border:   #C9A87A;
  --karton-body-border:  #E5D4B8;
  --karton-stitch:       #B8863E;
  --karton-shadow-inset: rgba(154, 52, 18, 0.08);
  --karton-shadow-soft:  rgba(154, 52, 18, 0.04);
  --karton-shadow-hover: rgba(154, 52, 18, 0.18);
  --karton-data-border:  rgba(154, 52, 18, 0.15);

  /* Upload-Zone Drag-State: Terrakotta-Soft-BG (Handoff §2.6). */
  --upload-drag-bg: var(--color-primary-soft);

  /* Export-Tabelle: Klärungs-Zeilen (§2.8) dezent amber getönt. */
  --export-clarify-row-bg: rgba(245, 158, 11, 0.06);

  /* Triage-Slideover (Original-Beleg-Panel) */
  --slideover-shadow: -6px 0 24px rgba(15, 23, 42, 0.15);

  /* ─────────────────────────────────────────────────────────────
     Landing-Page-Tokens (--lp-*)
     Geschlossener Block für die öffentliche Landing + Spoke-Seiten.
     Die Landing nutzt ein eigenes warm-kühles System (Terrakotta auf
     Paper-White), das außerhalb der Buchhalter-App nicht genutzt wird.
     Alle Hex/rgba-Werte, die landing.css braucht, leben hier.
     ──────────────────────────────────────────────────────────── */

  /* Brand / Akzent — Terrakotta (Kern-Identität) */
  --lp-accent-warm:        #C2410C;
  --lp-accent-warm-hover:  #9A340E;
  --lp-accent-warm-soft:   #FDF2ED;

  /* Flächen */
  --lp-bg-paper:           #FBF9F5;
  --lp-bg-page:            #FFFFFF;
  --lp-bg-ink:             #0F172A;
  --lp-bg-white:           #FFFFFF;
  --lp-ink:                #1A1815;

  /* Text / Foreground */
  --lp-fg1:                #0F172A;
  --lp-fg-on-dark:         #FFFFFF;

  /* Slates (aliased; gleiche Werte wie Primitives oben, aber unter --lp-* adressierbar) */
  --lp-slate-300:          #CBD5E1;
  --lp-slate-400:          #94A3B8;
  --lp-slate-500:          #64748B;
  --lp-slate-600:          #475569;
  --lp-slate-700:          #334155;
  --lp-slate-900:          #0F172A;
  --lp-slate-50:           #F8FAFC;

  /* Borders */
  --lp-color-border:       #E2E8F0;

  /* Status / Code-Highlights */
  --lp-green-700:          #166534;

  /* Beleg-Paper (Hero-Illustration) */
  --lp-beleg-bg:           #FEF9F1;
  --lp-beleg-border:       #F3E6D0;
  --lp-beleg-dashed:       #D4B998;
  --lp-beleg-ink:          #78350F;

  /* DATEV-Vorschau (Härtefall-Tabs) */
  --lp-datev-border:       #E8D5B7;
  --lp-datev-head-bg:      #E8D5B7;
  --lp-datev-divider:      #C9A87A;

  /* Terrakotta-Staffel (Deep) */
  --lp-terrakotta-700:     #B8593E;
  --lp-terrakotta-900:     #7A2F15;
  --lp-terra-50:           #FAF3EF;
  --lp-terra-700:          #B8593E;

  /* Code-Block-Paletten */
  --lp-code-bg:            #0F172A;
  --lp-code-fg:            #E2E8F0;
  --lp-code-key:           #93C5FD;
  --lp-code-string:        #FCA5A5;
  --lp-code-bool:          #FDE68A;
  --lp-code-number:        #BBF7D0;
  --lp-code-enterprise-bg: #1A1815;
  --lp-code-enterprise-fg: #E8E4DF;
  --lp-code-enterprise-k:  #E8E4DF;
  --lp-code-enterprise-s:  #E89978;
  --lp-code-enterprise-v:  #B5CEA8;
  --lp-code-enterprise-n:  #569CD6;

  /* rgba-Literale (mit Alpha — müssen als Token liegen) */
  --lp-nav-border:             rgba(30, 41, 59, 0.06);
  --lp-hero-shadow-1:          rgba(15, 23, 42, 0.15);
  --lp-hero-shadow-2:          rgba(15, 23, 42, 0.04);
  --lp-aud-shadow:             rgba(15, 23, 42, 0.10);
  --lp-datev-shadow:           rgba(154, 52, 18, 0.15);
  --lp-datev-border-dashed-1:  rgba(154, 52, 18, 0.35);
  --lp-datev-border-dashed-2:  rgba(154, 52, 18, 0.15);
  --lp-datev-border-top:       rgba(154, 52, 18, 0.18);
  --lp-datev-bu-bg:            rgba(194, 65, 12, 0.07);
  --lp-datev-foot-bg:          rgba(232, 213, 183, 0.35);
  --lp-datev-code-bg:          rgba(194, 65, 12, 0.10);
  --lp-final-text-muted:       rgba(255, 255, 255, 0.70);
  --lp-footer-text:            rgba(255, 255, 255, 0.55);
  --lp-footer-border:          rgba(255, 255, 255, 0.08);
  --lp-section-dark-intro:     rgba(255, 255, 255, 0.70);

  /* Typografie — zusätzliche Familien, die der Spoke-Designer nutzt */
  --lp-font-sans:   "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lp-font-serif:  "Plus Jakarta Sans", Georgia, "Times New Roman", serif;
  --lp-font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Density-Tweak */
[data-density="comfortable"] {
  --dv-cell-pad-y: 7px;
  --dv-cell-pad-x: 9px;
  --dv-size-table:  12px;
  --dv-size-micro:  11px;
  --dv-row-h:       28px;
}

/* ─────────────────────────────────────────────────────────────────
   3. Dark-Mode — konservative Inversionen auf Semantic-Ebene.
   Aktiviert via <html data-theme="dark">.
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-app:   var(--slate-900);
  --color-bg-card:  var(--slate-800);
  --color-bg-paper: var(--slate-900);
  --color-bg-zebra: var(--slate-800);
  --color-bg-hover: var(--slate-700);

  --color-text-primary:   var(--slate-50);
  --color-text-secondary: var(--slate-400);
  --color-text-muted:     var(--slate-500);
  --color-text-inverted:  var(--slate-900);

  --color-border:        var(--slate-700);
  --color-border-hover:  var(--slate-600);
  --color-border-strong: var(--slate-600);

  --color-primary:       #E8824A;  /* terrakotta-400, aufgehellt für Dark-BG */
  --color-primary-hover: #F2975F;  /* terrakotta-300 */

  --status-offen-fg: var(--slate-300);
  --status-offen-bg: var(--slate-700);
  --status-in-analyse-fg: var(--violet-100);
  --status-in-analyse-bg: rgba(124, 58, 237, 0.25);
  --status-fertig-fg: var(--green-100);
  --status-fertig-bg: rgba(22, 163, 74, 0.25);
  --status-exportiert-fg: var(--slate-100);
  --status-exportiert-bg: rgba(148, 163, 184, 0.22);
  --status-geaendert-fg: var(--amber-100);
  --status-geaendert-bg: rgba(245, 158, 11, 0.25);
  --status-exportiert-geaendert-fg: var(--amber-100);
  --status-exportiert-geaendert-bg: rgba(245, 158, 11, 0.25);

  --alert-error-fg:   var(--red-100);
  --alert-error-bg:   rgba(220, 38, 38, 0.2);
  --alert-warning-fg: var(--amber-100);
  --alert-warning-bg: rgba(245, 158, 11, 0.2);
  --alert-success-fg: var(--green-100);
  --alert-success-bg: rgba(22, 163, 74, 0.2);
  --alert-neutral-fg: var(--slate-300);
  --alert-neutral-bg: var(--slate-700);
  --alert-info-fg:    var(--slate-100);
  --alert-info-bg:    rgba(148, 163, 184, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4),  0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45), 0 8px 10px rgba(0, 0, 0, 0.2);

  --color-backdrop: rgba(0, 0, 0, 0.6);

  /* Karton-Deckel im Dark-Mode: gedämpft, damit der Deckel-Effekt nicht
     fluoreszierend wirkt. Terrakotta-Tönung bleibt als Subtle-Accent. */
  --karton-lid-bg:       var(--slate-700);
  --karton-lid-border:   var(--slate-600);
  --karton-body-border:  var(--slate-700);
  --karton-stitch:       var(--terrakotta-400);
  --karton-shadow-inset: rgba(232, 130, 74, 0.10);
  --karton-shadow-soft:  rgba(232, 130, 74, 0.04);
  --karton-shadow-hover: rgba(232, 130, 74, 0.22);
  --karton-data-border:  var(--slate-700);

  --export-clarify-row-bg: rgba(245, 158, 11, 0.12);
}