/* =============================================================================
   Landing-Page-Tokens (--lp-*)
   =============================================================================
   Eigener Token-Block für die öffentliche Landing- und Spoke-Seiten.
   Die Landing nutzt ein eigenes warm-kühles System (Terrakotta auf Paper-White)
   und Tailwind-Slates als Neutralton — getrennt von der Buchhalter-App.

   Wird in landing_base.html NACH tokens.css geladen, damit die Slate-
   Aliases die Palette-Werte überschreiben.
   ============================================================================= */

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

  /* Sekundär-Akzent — Teal (positiver Status: Geht-Direkt, Vorgang) */
  --lp-accent-teal:        #115E59;
  --lp-accent-teal-hover:  #0E4E4A;
  --lp-accent-teal-soft:   #E6F0EF;

  /* Motion — eine Quelle für Dauer + Kurve. Die ganze Landing zieht diese durch,
     statt Streuwerte (.15s/.2s/.5s) mit Default-ease. --lp-ease-out ist die
     Signature (sanftes Auslaufen); --lp-ease-spring gibt Dots/Scales einen
     dezenten Overshoot. --lp-ease-inout deckt sich mit dem Tinten-Reveal im JS. */
  --lp-dur-fast:   160ms;   /* Hover-Farbwechsel, Mikro-States */
  --lp-dur-base:   260ms;   /* UI-Zustände: Menü, Dots, Karussell-Wechsel */
  --lp-dur-slow:   560ms;   /* Sektions-Reveals, Hero-Spalten */
  --lp-ease-out:   cubic-bezier(.22,.61,.36,1);
  --lp-ease-inout: cubic-bezier(.65,0,.35,1);
  --lp-ease-spring: cubic-bezier(.34,1.4,.5,1);

  /* Hotelbeleg-Visual im Hero — Sepia-Töne */
  --lp-beleg-paper-light:  #FFFEFA;
  --lp-beleg-paper-dark:   #E8DECB;
  --lp-beleg-ink-dark:     #4A2A0A;

  /* 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;

  /* Slate-Overrides — Landing nutzt Tailwind-Slates statt der warmen
     v3-Palette. Diese Override-Werte greifen NUR auf Landing-Seiten
     (landing_base.html lädt diese Datei nach tokens.css). */
  --slate-300:          #CBD5E1;
  --slate-400:          #94A3B8;
  --slate-500:          #64748B;
  --slate-600:          #475569;
  --slate-700:          #334155;
  --slate-900:          #0F172A;
  --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);

  /* Lightbox (Beleg-Großansicht in Härtefällen) */
  --lp-lightbox-backdrop:      rgba(0, 0, 0, 0.88);
  --lp-lightbox-img-shadow:    rgba(0, 0, 0, 0.50);
  --lp-lightbox-close-bg:      rgba(255, 255, 255, 0.10);
  --lp-lightbox-close-bg-hover: rgba(255, 255, 255, 0.20);
  --lp-lightbox-close-border:  rgba(255, 255, 255, 0.25);

  /* v7-Landing: Sticky-Header, Trial-Card, Key-Step, Final-CTA */
  --lp-header-bg:                  rgba(252, 250, 247, 0.88);
  --lp-header-bg-scrolled:         rgba(252, 250, 247, 0.94);
  --lp-header-shadow-1:            rgba(15, 23, 42, 0.02);
  --lp-header-shadow-2:            rgba(15, 23, 42, 0.18);
  --lp-trial-shadow:               rgba(15, 23, 42, 0.12);
  --lp-step-icon-shadow:           rgba(15, 23, 42, 0.04);
  --lp-key-step-shadow:            rgba(194, 65, 12, 0.25);
  --lp-betastrip-shadow:           rgba(15, 23, 42, 0.12);
  --lp-betastrip-shadow-hover:     rgba(15, 23, 42, 0.22);
  --lp-final-cta-bg:               rgba(255, 255, 255, 0.04);
  --lp-final-cta-border:           rgba(255, 255, 255, 0.10);
  --lp-final-cta-border-hover:     rgba(255, 255, 255, 0.50);
  --lp-final-cta-border-strong:    rgba(255, 255, 255, 0.25);
  --lp-final-cta-divider:          rgba(255, 255, 255, 0.12);
  --lp-final-cta-text:             rgba(255, 255, 255, 0.55);
  --lp-final-cta-label:            rgba(255, 255, 255, 0.50);
  --lp-trust-dark-dot:             rgba(255, 255, 255, 0.30);
  --lp-line-through-color:         rgba(100, 116, 139, 0.45);
  --lp-section-label-on-dark:      var(--terracotta-300);
  --lp-betastrip-border-accent:    var(--terracotta-500);
  --lp-step-num-dash:              var(--terracotta-600);
  --lp-step-bullet:                var(--slate-400);
  --lp-step-bullet-key:            var(--terracotta-500);
  --lp-aud-bullet:                 var(--terracotta-500);
  --lp-compare-bullet-old:         currentColor;
  --lp-compare-bullet-new:         var(--terracotta-600);
  --lp-tab-shot-bg-from:           var(--paper-50);
  --lp-tab-shot-bg-to:             var(--paper-50);
  --lp-beta-pill-bg:               var(--terracotta-50);
  --lp-beta-pill-fg:               var(--terracotta-700);
  --lp-beta-pill-border:           var(--terracotta-100);
  --lp-betastrip-pill-bg:          var(--terracotta-600);
  --lp-betastrip-pill-fg:          var(--white);
  --lp-key-step-bg:                var(--terracotta-50);
  --lp-key-step-icon-bg:           var(--terracotta-600);
  --lp-key-step-icon-fg:           var(--white);
  --lp-aud-icon-bg:                var(--lp-accent-warm-soft);
  --lp-aud-icon-fg:                var(--lp-accent-warm);
  --lp-aud-border-hover:           var(--slate-300);
  --lp-divider-dashed:             var(--color-border);
  --lp-difference-bg:              var(--paper-50);
  --lp-nav-cta-bg:                 var(--lp-fg1);
  --lp-nav-cta-bg-hover:           var(--slate-900);

  /* Typografie — Landing-Schriften */
  --lp-font-sans:   "Switzer", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lp-font-serif:  "Switzer", "Plus Jakarta Sans", Georgia, "Times New Roman", serif;
  --lp-font-mono:   "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Landing-spezifische Display-Größen (Hero) */
  --lp-font-size-display-xl: 64px;   /* Hero H1, Desktop */
  --lp-font-size-display:    48px;   /* Hero H1, Tablet */
}

/* ─────────────────────────────────────────────────────────────────
   Dark-Mode — Cool Dark Variante
   Auto-Aktivierung via FOUC-Script in landing_base.html
   (prefers-color-scheme: dark → data-theme="dark").
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Flächen — kühl-dunkle Slate-Stufen, kohärent zum kühlen Light-Landing.
     Literale (keine var()-Kette): --lp-bg-page UND --slate-900 lagen auf
     demselben Selektor, dadurch löste --lp-bg-page zum invertierten weißen
     --slate-900 auf — Seite weiß, Text weiß. */
  --lp-bg-page:            #0F172A;   /* Body / Seite */
  --lp-bg-paper:           #1E293B;   /* Cards / erhabene Flächen */
  --lp-bg-white:           #1E293B;
  --lp-ink:                #F1F5F9;
  --lp-fg1:                #F8FAFC;
  /* --lp-bg-ink + --lp-fg-on-dark bleiben — sie sind explizit für
     "always dark sections" (Hero-Footer, CTA-Bands) gedacht. */

  /* Rahmen entkoppelt von der Text-Skala (slate-700 ist im Dark-Mode heller
     Text — als Rahmen wäre er zu grell). */
  --lp-color-border:       #334155;

  /* Slate-Aliases: invertierte ROLLEN als Literale. Gegenseitige var()-
     Referenzen (400↔500, 300↔600) bildeten Zyklen → die Properties wurden
     ungültig und der Text fiel auf die geerbte Farbe zurück. Hell→Dunkel
     kippt die Skala: Text-Stufen werden hell, Flächen-Stufen dunkel. */
  --slate-50:           #1E293B;   /* Pill-/Subtle-BG: eine Stufe über der Seite */
  --slate-300:          #334155;   /* Divider / leise Rahmen */
  --slate-400:          #94A3B8;   /* gedämpfter Text + Rahmen + Balken (AA auf dunkel) */
  --slate-500:          #64748B;
  --slate-600:          #CBD5E1;   /* Sekundär-Text */
  --slate-700:          #E2E8F0;   /* starker / Headline-naher Text */
  --slate-900:          #F8FAFC;   /* stärkster Text */

  /* Beleg-Paper (Hero-Illustration): warm-dunkel statt Cremegelb */
  --lp-beleg-bg:           rgba(245, 158, 11, 0.06);
  --lp-beleg-border:       rgba(245, 158, 11, 0.18);
  --lp-beleg-dashed:       rgba(245, 158, 11, 0.32);
  --lp-beleg-ink:          var(--amber-100);

  /* DATEV-Vorschau — eigener Rahmen/Kopf, entkoppelt von der hellen Text-Skala */
  --lp-datev-border:       #334155;
  --lp-datev-head-bg:      #1E293B;
  --lp-datev-divider:      #334155;

  /* Akzent-Stack — heller damit Terrakotta auf dunklem BG sichtbar */
  --lp-accent-warm:        var(--terracotta-400);
  --lp-accent-warm-hover:  var(--terracotta-300);
  --lp-accent-warm-soft:   rgba(232, 130, 74, 0.12);
  --lp-terrakotta-700:     var(--terracotta-300);
  --lp-terrakotta-900:     var(--terracotta-100);
  --lp-terra-50:           rgba(232, 130, 74, 0.10);
  --lp-terra-700:          var(--terracotta-300);

  /* Sekundär-Akzent — Teal (Dark-Mode: heller Mint, lesbar auf slate-900) */
  --lp-accent-teal:        var(--fir-200);
  --lp-accent-teal-hover:  var(--fir-100);
  --lp-accent-teal-soft:   rgba(187, 247, 208, 0.10);

  --lp-green-700:          var(--fir-100);

  /* rgba-Tints: Sichtbarkeit auf dunklem BG anpassen */
  --lp-nav-border:             rgba(255, 255, 255, 0.08);
  --lp-hero-shadow-1:          rgba(0, 0, 0, 0.40);
  --lp-hero-shadow-2:          rgba(0, 0, 0, 0.20);
  --lp-aud-shadow:             rgba(0, 0, 0, 0.35);
  --lp-datev-shadow:           rgba(0, 0, 0, 0.45);
  --lp-datev-border-dashed-1:  rgba(245, 158, 11, 0.40);
  --lp-datev-border-dashed-2:  rgba(245, 158, 11, 0.18);
  --lp-datev-border-top:       rgba(245, 158, 11, 0.22);
  --lp-datev-bu-bg:            rgba(245, 158, 11, 0.10);
  --lp-datev-foot-bg:          rgba(245, 158, 11, 0.06);
  --lp-datev-code-bg:          rgba(245, 158, 11, 0.14);

  /* Sticky-Header dunkel im Dark-Mode (statt cremig-transparent). */
  --lp-header-bg:                  rgba(15, 23, 42, 0.85);
  --lp-header-bg-scrolled:         rgba(15, 23, 42, 0.92);
  --lp-header-shadow-1:            rgba(0, 0, 0, 0.30);
  --lp-header-shadow-2:            rgba(0, 0, 0, 0.40);

  /* Key-Step-Card (Schritt 3) — Terrakotta-Tint auf dunklem BG. */
  --lp-key-step-bg:                rgba(232, 130, 74, 0.10);
  --lp-key-step-shadow:            rgba(0, 0, 0, 0.40);
  --lp-step-icon-shadow:           rgba(0, 0, 0, 0.30);

  /* Anmelden-CTA im Header: Im Dark-Mode soll der CTA klar als Terrakotta-
     Brand-Button stehen (statt weißer Button mit weißem Text). */
  --lp-nav-cta-bg:                 var(--terracotta-500);
  --lp-nav-cta-bg-hover:           var(--terracotta-400);

  /* Hero-SVG-Illustration — Lid-/Pill-/Triage-Row-Farben.
     Landing-SVG bleibt in beiden Modi farbidentisch (illustrative Markenfarben). */
  --lp-svg-lid-terra:              var(--terracotta-300);
  --lp-svg-lid-green:              var(--fir-200);
  --lp-svg-lid-amber:              var(--amber-200);
  --lp-svg-pill-green-bg:          var(--fir-100);
  --lp-svg-pill-green-border:      var(--fir-200);
  --lp-svg-pill-green-fg:          var(--fir-700);
  --lp-svg-row-ok-bg:              var(--fir-100);
  --lp-svg-row-hinweis-bg:         var(--amber-100);
  --lp-svg-row-fehler-bg:          var(--terracotta-100);
  --lp-svg-row-ok-stripe:          var(--fir-500);
  --lp-svg-row-hinweis-stripe:     var(--amber-500);
  --lp-svg-row-fehler-stripe:      var(--terracotta-700);
  --lp-svg-row-ok-label:           var(--fir-700);
  --lp-svg-row-hinweis-label:      var(--amber-700);
  --lp-svg-row-fehler-label:       var(--terracotta-800);
}