/* =========================================================================
   Thonik — Design Tokens (Single Source of Truth)
   Richtung A "Hanseatische Moderne"
   Warm, seriös, hanseatisch, schnell — premium ohne Glanz.
   ========================================================================= */

:root {
  /* --- Farben: Marke ----------------------------------------------------- */
  --brand-primary: #102A43;       /* Tiefseeblau — Logo, H1, Footer, Trust */
  --brand-primary-700: #1E3A5F;   /* hover / aktiv (heller) */
  --brand-primary-900: #0A1C2E;   /* tief — Footer-BG */

  /* --- Farben: Akzent / CTA ---------------------------------------------- */
  --accent: #E8531B;              /* Signal-Orange — primärer CTA */
  --accent-700: #C04415;          /* CTA hover */

  /* --- Farben: Flächen & Text -------------------------------------------- */
  --bg: #F4EFE6;                  /* warmes Off-White — Body */
  --bg-card: #FFFFFF;             /* Karten, Formular */
  --bg-subtle: #FBF8F2;           /* leicht abgesetzte Sektionen */
  --text: #1A1A1A;                /* Anthrazit — Body-Text */
  --text-muted: #5B7283;          /* Slate — Captions, Labels, Meta */
  --text-on-dark: #F4EFE6;        /* Text auf dunklem Grund */
  --border: #E6DED1;              /* Hairlines auf Off-White */
  --border-dark: rgba(244, 239, 230, 0.16); /* Hairlines auf dunkel */

  /* --- Farben: Status ---------------------------------------------------- */
  --success: #1F7A4F;
  --success-bg: #E7F3EC;
  --warning: #C97A0E;             /* Pflichtfeld-Highlight */
  --error: #B3261E;

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Größen-Skala (rem) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* Line-Heights */
  --lh-display: 1.2;
  --lh-heading: 1.4;
  --lh-body: 1.6;

  /* Font-Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing-Skala (px) ------------------------------------------------ */
  --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;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  /* --- Radien ------------------------------------------------------------ */
  --radius-btn: 4px;
  --radius-card: 8px;
  --radius-tile: 12px;

  /* --- Schatten (zurückhaltend, kein Glassmorphism) ---------------------- */
  --shadow-card: 0 1px 2px rgb(16 42 67 / 0.08);
  --shadow-card-hover: 0 4px 16px rgb(16 42 67 / 0.10);
  --shadow-header: 0 1px 0 var(--border), 0 2px 8px rgb(16 42 67 / 0.04);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-mid: 320ms;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 56px;
  }
}