/* ==========================================================================
   MERZ Design Tokens — portiert aus dem Claude-Designsystem (Figma "Merz KI").
   Quelle: gfx/designsystem/tokens/*.css. Werte 1:1 übernommen.
   Diese Datei ist die kanonische Token-Quelle für Theme + EHNES-Widgets.
   ========================================================================== */

/* Fonts — Source Sans 3 (Nachfolger von Source Sans Pro, metrikkompatibel) + Roboto */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Roboto:wght@500&display=swap');

:root {
  /* --- Farben: Basis --- */
  --merz-rot: rgb(181, 27, 38);            /* Primärfarbe "Merz Rot" */
  --merz-blau: rgb(0, 139, 197);           /* "Merz Blau" — Footer, Stat-Kacheln, Akzent */
  --merz-dunkelgrau: rgb(72, 72, 71);      /* "Textfarbe" — Fließtext & Überschriften */
  --merz-hellgrau: rgb(243, 243, 243);     /* Sektionshintergründe, Kartenflächen */
  --merz-umrandung: rgb(175, 175, 175);    /* Kartenränder, Input-Border */
  --merz-weiss: rgb(255, 255, 255);
  --merz-schwarz: rgb(0, 0, 0);            /* Topbar */
  --pce-logo-rot: rgb(227, 6, 19);         /* PCE-Quadrat im Logo */
  --grau-platzhalter: rgb(217, 217, 217);  /* Bild-Fallbackfläche */

  /* --- Farben: semantisch --- */
  --text-body: var(--merz-dunkelgrau);
  --text-heading: var(--merz-dunkelgrau);
  --text-eyebrow: var(--merz-rot);
  --text-invers: var(--merz-weiss);
  --surface-page: var(--merz-weiss);
  --surface-section: var(--merz-hellgrau);
  --surface-card: var(--merz-weiss);
  --surface-accent: var(--merz-rot);
  --surface-footer: var(--merz-blau);
  --surface-topbar: var(--merz-schwarz);
  --border-card: var(--merz-umrandung);
  --border-input: var(--merz-umrandung);
  --action-primary: var(--merz-rot);
  --action-secondary: var(--merz-blau);
  --link-color: var(--merz-rot);

  /* --- Typografie --- */
  --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Roboto", "Source Sans 3", Arial, sans-serif;

  --fs-display: 100px;   /* Laufband */
  --fs-hero: 72px;       /* Hero-Titel, Kennzahlen */
  --fs-h2: 48px;         /* Sektionsüberschrift (lh 55px) */
  --fs-h3: 32px;         /* Panel-Titel (lh 55px) */
  --fs-h4: 29px;         /* Kartentitel */
  --fs-h5: 24px;         /* Listentitel (lh 25px) */
  --fs-eyebrow: 20px;    /* rote Kicker-Zeile */
  --fs-nav: 18px;        /* Navigation / hervorgehobener Body */
  --fs-body: 18px;       /* Fließtext (lh 100%!) */
  --fs-button: 16px;     /* Buttons, Badges */
  --fs-input: 16px;      /* Formularfelder */
  --fs-small: 12px;      /* Kleinstlabels (Roboto Medium) */

  /* --- Layout (1920er-Canvas) --- */
  --page-width: 1920px;
  /* Inhaltsbreite NICHT hier hardcoden: kommt aus der globalen Elementor-
     Einstellung (Site Settings → Layout → Content Width). Elementor stellt
     die Variable --content-width bereit; unsere Sektionen nutzen sie direkt. */
  --page-margin: 252px;
  --section-pad-top: 100px;
  --section-pad-bottom: 120px;
  --grid-gap: 24px;
  --stack-gap-title: 11px;      /* H2 → Subline */
  --stack-gap-eyebrow: 36px;    /* Kicker → H2 */

  /* --- Radius --- */
  --radius: 5px;
  --radius-input: 6px;
  --radius-round: 50%;

  /* --- Border --- */
  --border-w-card: 1px;
  --border-w-input: 0.5px;

  /* --- Schatten --- */
  --shadow-header: 0px 0px 14.5px 0px rgba(0, 0, 0, 0.25);
  --shadow-panel: 0px -12px 14.1px 0px rgba(0, 0, 0, 0.25);

  /* --- Buttons --- */
  --button-height: 35px;
  --button-height-header: 38px;
  --button-pad: 6px 12px;
  --button-gap: 6px;
}