/* ============================================================
   FLOORLAKE IT - Design-Tokens (einzige Quelle)

   Eingebunden von der Marketing-Seite (resources/marketing/partials/
   head.html), dem Admin-Bereich (x-layout), dem Login (app.blade.php)
   und den vCards. Statische Datei, nicht über Vite gebaut - die
   Marketing-Seiten sind rohes HTML ohne @vite (siehe PageRenderer).

   Herkunft (siehe docs/DESIGN-REVIEW.md, "Token-Mapping"):
   - Markentöne aus dem Claude Design System (--fl-*): Navy #154666,
     Teal #298073, Gradient, Radius-Skala, Dauer-Tokens.
   - Tiefe Navy-Flächen, Mint-Akzent und Dark Mode aus der bisherigen
     Live-Site - als erweiterte Skala unter den alten Namen, damit das
     bestehende Markup unverändert weiterläuft.
   Kontraste der Paare sind im Review gemessen (WCAG AA).
   ============================================================ */

:root{
  /* ---------- Claude Design System (Referenzskala) ---------- */
  --fl-navy-900:#0e3550;--fl-navy-800:#154666;--fl-navy-700:#1c5a82;--fl-navy-600:#26749f;--fl-navy-500:#3688b8;
  --fl-teal-800:#1d5c53;--fl-teal-700:#298073;--fl-teal-600:#339c8c;--fl-teal-500:#45b3a1;--fl-teal-400:#6ecab9;
  --fl-off-white:#f6f7f5;

  /* ---------- Marke ----------
     Tiefe Flächen (Hero, Stats, Kontakt, Footer) bleiben die Signatur;
     --brand-navy ist der Logo-Ton für dunkle Karten und Akzente. */
  --navy-950:#061B27;
  --navy-900:#061B27;
  --navy-850:#0A2A3B;
  --navy-800:#0A2A3B;
  --navy-700:#0C3348;
  --navy-600:#154666;
  --brand-navy:#154666;

  /* Teal: -600 für Flächen (Weiß darauf 4.74:1), -700 für Hover/
     gedrückt (Weiß 7.75:1), -500 nur dekorativ (Linien, Balken).
     Kleine Teal-Schrift immer über --teal-text. */
  --teal-700:#1d5c53;
  --teal-600:#298073;
  --teal-500:#339c8c;
  --teal-text:#1d5c53;
  --mint-400:#63D6A8; /* nur auf Navy, nie auf Teal (2.64:1) */

  /* ---------- Flächen & Text ---------- */
  --fog-100:#F1F4F5;
  --fog-200:#E4E9EB;
  --white:#FFFFFF;
  --line:rgba(12,51,72,.12);
  --line-strong:rgba(12,51,72,.22);
  --line-dark:rgba(255,255,255,.14);
  --border-input:#7d8399;
  --border-input-dark:rgba(255,255,255,.45);
  --txt:#0C3348;
  --txt-soft:#3D5F72;
  --txt-faint:rgba(12,51,72,.7);
  --txt-inv:#EAF1F3;
  --txt-inv-soft:#A9C2CD;
  --header-stuck-bg:rgba(241,244,245,.86);
  --focus-ring:var(--teal-600);
  --focus-ring-dark:var(--mint-400);

  /* ---------- Status ----------
     Flächen/Punkte über --success/--warning/--danger, Schrift auf
     hellem Grund über die *-text-Varianten (die Flächenfarben schaffen
     als Text auf Weiß nur 2.6-2.9:1). --alert/--warn/--status-ok sind
     die alten Namen und zeigen auf dieselben Werte. */
  --success:#2f9e6e;
  --warning:#d69a1f;
  --danger:#c94f4f;
  --danger-soft:#F0857B;
  --info:#3D5F72;
  --success-text:#1d7a4f;
  --warning-text:#8a5d12;
  --danger-text:#b3372d;
  --alert:var(--danger);
  --warn:var(--warning);
  --status-ok:var(--success);
  --status-maintenance:#0A0E12;

  /* ---------- Radius (DS-Skala) ----------
     Pill nur für Badge/Chip/Switch - Buttons und Karten nie. */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:24px;
  --r-pill:999px;

  /* ---------- Schatten (navy-getönt, zweilagig) ---------- */
  --shadow-sm:0 1px 2px rgba(12,51,72,.06),0 2px 6px -2px rgba(12,51,72,.08);
  --shadow-md:0 2px 4px rgba(12,51,72,.05),0 14px 32px -14px rgba(12,51,72,.22);
  --shadow-lg:0 4px 10px rgba(12,51,72,.06),0 30px 64px -30px rgba(12,51,72,.4);

  /* ---------- Typografie ---------- */
  --font-sans:"Poppins",system-ui,sans-serif;
  /* --font-label: Labels, Kennzahlen, Details (proportional, präzise).
     --font-mono: nur für echten Code. */
  --font-label:"Geist",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --fs-display:clamp(40px,5.8vw,76px);
  --fs-h1:clamp(32px,4.6vw,56px);
  --fs-h2:clamp(30px,4.2vw,50px);
  --fs-h3:clamp(19px,2vw,22px);
  --fs-lead:clamp(17px,1.5vw,19px);
  --fs-body:17px;
  --fs-sm:15px;
  --fs-xs:13.5px;
  --fs-label:12px;
  --lh-tight:1.06;
  --lh-snug:1.3;
  --lh-body:1.62;
  --ls-tight:-.026em;
  --ls-label:.14em;

  /* ---------- Abstand & Layout ----------
     --sec ist der EINZIGE Abstand zwischen Sektionen (siehe
     docs/ENTSCHEIDUNGEN.md, 2026-09-21). */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,10vw,132px);
  --max:1220px;

  /* ---------- Motion ----------
     --ease: Einblenden/Enter (kräftiges ease-out)
     --ease-standard: UI-Zustandswechsel (DS)
     --ease-in-out: Bewegung auf dem Bildschirm
     UI-Interaktionen bleiben unter 300 ms; längere Dauern nur für
     einmalige Marketing-Animationen (Reveal, Balken, Sparklines). */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-fast:120ms;
  --dur-normal:200ms;
  --dur-slow:320ms;
  --dur-reveal:700ms;

  /* ---------- Verläufe ---------- */
  --grad-brand:linear-gradient(135deg,var(--fl-navy-800) 0%,var(--fl-navy-700) 45%,var(--fl-teal-700) 100%);
  --grad-deep:linear-gradient(120deg,var(--navy-850) 30%,var(--brand-navy) 70%,#1f6b69 100%);
  --grad-accent:linear-gradient(90deg,var(--teal-500),var(--mint-400));
}

/* ---------- Dunkelmodus ----------
   Überschreibt nur neutrale Oberflächen-, Text- und Statuswerte. Die
   ohnehin dunklen Sektionen nutzen feste Navy-Werte und bleiben gleich. */
:root[data-theme="dark"]{
  --fog-100:#0B1A24;
  --fog-200:#16232E;
  --white:#101E29;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --border-input:rgba(255,255,255,.45);
  --txt:#EAF1F3;
  --txt-soft:#A9C2CD;
  --txt-faint:rgba(234,241,243,.55);
  --teal-text:#45b3a1;
  --header-stuck-bg:rgba(11,26,36,.88);
  --focus-ring:var(--mint-400);

  --success:#3fcf86;
  --warning:#F0B95B;
  --danger:#FF6B5B;
  --info:#A9C2CD;
  --success-text:#3fcf86;
  --warning-text:#F0B95B;
  --danger-text:#FF8A7D;
  --status-maintenance:#FFFFFF;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 6px -2px rgba(0,0,0,.35);
  --shadow-md:0 2px 4px rgba(0,0,0,.25),0 14px 32px -14px rgba(0,0,0,.6);
  --shadow-lg:0 4px 10px rgba(0,0,0,.3),0 30px 64px -30px rgba(0,0,0,.75);
}