/*
  Design-Tokens Marlin
  Quelle: 02_Design-System/design-tokens.md
  Status: v1.0 (03.11.2026) – freigegeben von Xanatos zur Live-Umsetzung, abgeleitet aus dem IST-Stand,
          noch nicht durch CI bestätigt.
  Alle Text-/Hintergrund-Paare WCAG 2.1 AA geprüft (Werte in design-tokens.md).
*/

:root {
	/* Farben – 3 Kerntöne: Petrol (Aktion), Tiefsee (Struktur), Eisblau (Akzent auf Dunkel) */
	--m-color-primary: #246d8c;        /* Buttons, Links, Fokus – 5,8:1 auf Weiß */
	--m-color-primary-dark: #1a5570;   /* Hover/aktiv – 8,2:1 */
	--m-color-deep: #2f3e43;           /* Überschriften, Footer-Fläche – 11,1:1 */
	--m-color-deep-2: #222d31;         /* Socket */
	--m-color-accent: #9fd5e8;         /* NUR auf dunklen Flächen (7,0:1 auf Tiefsee) */
	--m-color-text: #3f4b50;           /* Fließtext – 9,0:1 */
	--m-color-text-muted: #5b686d;     /* Nebentext, Meta – 5,8:1 */
	--m-color-text-on-dark: #e3e9eb;   /* Text im Footer – 9,1:1 */
	--m-color-bg: #ffffff;
	--m-color-surface: #f1f5f7;        /* Boxen/Kacheln, ersetzt #e8e8e8 */
	--m-color-border: #d6dfe3;         /* dekorative Linien */
	--m-color-border-ui: #7b8b91;      /* Rahmen von Eingabefeldern – 3,5:1 */
	--m-color-success: #2e7d4f;
	--m-color-warning: #8a5a00;
	--m-color-error: #b02b2c;          /* bisheriges Box-Rot, nur noch für Fehler */
	--m-focus-ring: 3px solid var(--m-color-primary);
	--m-focus-ring-on-dark: 3px solid var(--m-color-accent);

	/* Typografie – eine Familie, lokal gehostet (OFL-Lizenz) */
	--m-font-heading: "Inter", Arial, Helvetica, sans-serif;
	--m-font-body: "Inter", Arial, Helvetica, sans-serif;
	--m-fw-regular: 400;
	--m-fw-semibold: 600;
	--m-fw-bold: 700;
	--m-fs-small: 0.875rem;                                  /* 14 px – Minimum, z. B. Breadcrumb, Socket */
	--m-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* 16–18 px */
	--m-fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* Einleitungen 18–22 px */
	--m-fs-h4: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);       /* 18–20 px */
	--m-fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);          /* 20–28 px */
	--m-fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);       /* 24–36 px */
	--m-fs-h1: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);         /* 28–48 px */
	--m-lh-body: 1.6;
	--m-lh-heading: 1.2;
	--m-measure: 70ch;                                       /* max. Zeilenlänge Fließtext */

	/* Abstände – 8-px-Raster */
	--m-space-xs: 0.5rem;
	--m-space-s: 1rem;
	--m-space-m: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	--m-space-l: clamp(2.5rem, 1.5rem + 4vw, 5rem);

	/* Form */
	--m-radius-s: 6px;     /* Buttons, Eingabefelder */
	--m-radius-m: 12px;    /* Boxen, Kacheln */
	--m-shadow: 0 2px 8px rgba(34, 45, 49, 0.08);
	--m-shadow-hover: 0 6px 20px rgba(34, 45, 49, 0.14);
	--m-tap-min: 44px;
	--m-container: 1310px;
}