/* ==========================================================================
   BUHA — Design-Tokens
   1:1 aus 02-Designsystem.md, Abschnitt 14. Als CSS-Custom-Properties im :root.
   Diese Datei ist die einzige Quelle für Farben, Typo, Abstände usw.
   ========================================================================== */

:root {
  /* --- Marke: Marineblau (Designsystem 2.2) ------------------------------ */
  --c-navy-900: #0B1B33; /* Footer, dunkle Sektionen, stärkster Text auf Hell */
  --c-navy-800: #10254A; /* Header-BG Desktop, Hero-dunkel, CTA-Band */
  --c-navy-700: #15315F; /* Primärfarbe — Headlines, Nav-Text, Icons */
  --c-navy-600: #1E4A8C; /* Hover auf Navy, Links, sekundäre Akzente */
  --c-navy-100: #E7ECF5; /* helle Blau-Fläche, Info-Boxen */
  --c-navy-050: #F2F5FA; /* zarte Blau-Tönung für abwechselnde Sektionen */

  /* --- Akzent: Bernstein — nur Handlung/CTAs (Designsystem 2.3) ---------- */
  --c-amber-600: #B8761A; /* Akzent-Text auf Hell, Icon-Akzente */
  --c-amber-500: #E08A1E; /* Primär-CTA-Buttons (Default) */
  --c-amber-400: #F2A03D; /* CTA-Hover, Highlight-Linien, Rechner-Marker */
  --c-amber-100: #FBE9D2; /* sehr helle Akzentfläche, Badges */

  /* --- Neutrale Töne (Designsystem 2.4) --------------------------------- */
  --c-ink-900: #1A2230; /* Fließtext-Maximum / Überschriften auf Hell */
  --c-ink-700: #3A4456; /* Standard-Fließtext */
  --c-ink-500: #5E6878; /* Sekundärtext, Captions, Hilfetext */
  --c-ink-300: #AEB6C2; /* deaktivierter Text, Placeholder */
  --c-line:    #D9DEE6; /* Rahmen, Trennlinien, Card-/Input-Border */
  --c-surface: #FFFFFF; /* Karten, Inputs, oberste Ebene */
  --c-bg:      #FBFCFD; /* Seiten-Grundhintergrund (Off-White) */
  --c-bg-soft: #F2F5FA; /* abwechselnde Sektionsflächen */

  /* --- Zustandsfarben (Designsystem 2.5) -------------------------------- */
  --c-success:    #1E7A4D;
  --c-success-bg: #E3F2EA;
  --c-warning:    #B8761A;
  --c-warning-bg: #FBE9D2;
  --c-error:      #C0392B;
  --c-error-bg:   #F9E4E1;
  --c-whatsapp:      #25D366;
  --c-whatsapp-dark: #1EAE54;

  /* --- Typografie (Designsystem 3) -------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Spacing-Skala — 8px-Basis (Designsystem 4.3) --------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- Radien / Schatten (Designsystem 4.4) ----------------------------- */
  --r-sm: 8px;   /* Buttons, Inputs */
  --r-md: 12px;  /* Karten, Container */
  --r-lg: 16px;  /* Modals, große Hero-Medien */
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, 0.06);
  --shadow-md: 0 6px 20px rgba(11, 27, 51, 0.10);
  --shadow-lg: 0 16px 48px rgba(11, 27, 51, 0.16);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-read: 760px;
  --focus-ring: 0 0 0 3px rgba(30, 74, 140, 0.45);

  /* --- Z-Index-Skala (Designsystem 4.4) --------------------------------- */
  --z-header: 50;
  --z-dropdown: 55;
  --z-bottombar: 60;
  --z-overlay: 100;
  --z-modal: 110;
  --z-cookie: 120;
  --z-toast: 130;
}