/* mcf Automobile Design System — Tokens, übernommen aus dem Claude-Design-System
   (claude.ai/artifact/6KEUAyLM2dtZBaBLbrVLAF, tokens.json). Werte dort ändern und hierher kopieren.
   Schrift: Muli heißt bei Google seit 2020 „Mulish“ (gleiche Gestaltung) – lokal als variable Schrift in css/fonts.css. */

:root, [data-theme="light"] {
  --mcf-blue: #0092c7;
  --mcf-blue-hover: #007cab;
  --mcf-blue-pressed: #006a94;
  --mcf-blue-tint: #e6f4fa;
  --mcf-blue-soft: #b8e0ef;
  --black: #000000;
  --ink: #1f2328;
  --ink-2: #3e444d;
  --ink-3: #6b7280;
  --line: #e5e8eb;
  --line-2: #eff1f4;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #f9fafb;
  --on-dark: #ffffff;
  --success: #1da64a;
  --warning: #e0a418;
  --danger: #d32f2f;
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --bg-1: var(--surface);
  --bg-2: var(--surface-2);
  --bg-3: var(--surface-3);
  --accent: var(--mcf-blue);
  --accent-fg: #ffffff;
  --shadow-0: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 2px rgba(0,146,199,0.35);
}

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;
  --container: 1200px;
  --container-wide: 1440px;
  --header-h: 80px;
  --font-sans: "Mulish", "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.display { font-family: var(--font-sans); font-size: 64px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-sans); font-size: 48px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-sans); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.lead { font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1.7; }
.body { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.5; }
.small { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.5; }
.caption { font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.12em; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }