/* masculine.eu — Design-Tokens (aus Entwurf 3, freigegeben 2026-10-14). Quelle der Wahrheit für Theme und Seiten.
   Doku: docs/design-system.md. Schriften werden lokal gehostet (DSGVO) — siehe src/theme/fonts.css (Phase 2). */
:root {
  /* ---------- Farben: Marke ---------- */
  --deep: #0B2C38;        /* Hauptfläche dunkel (Hero, CTA, Footer-Basis) */
  --deep-2: #103B4A;      /* Karten auf dunkel */
  --deep-3: #081F28;      /* Footer, Mega-Menü, Drawer */
  --blue: #5A9BB3;        /* Akzent: Linien, Icons, Flächen — NICHT für Text auf hell (3,0:1) */
  --sky: #80BBD4;         /* Akzent auf dunkel, Buttons */
  --sky-pale: #A9CBD8;
  --stone: #BEC5BB;

  /* ---------- Farben: Flächen & Text ---------- */
  --paper: #F3F6F6;       /* Seitenhintergrund hell */
  --white: #FFFFFF;
  --ink: #16252C;         /* Überschriften auf hell (14,9:1) */
  --text: #43525A;        /* Fließtext auf hell (7,4:1) */
  --muted: #5F6E75;       /* Nebentext auf hell, ≥ 4,5:1 (Entwurf hatte #7B8A91 = 3,3:1) */
  --blue-text: #3B7891;   /* Links/Labels in Blau auf hell, ≥ 4,5:1 */
  --line: #D6E0E3;
  --on-deep: #D5E6EC;     /* Text auf dunkel */
  --on-deep-dim: rgba(213, 230, 236, .7);
  --hair: rgba(213, 230, 236, .16);
  --wa: #1F8F55;          /* WhatsApp-Button */
  --warn-bg: #FFF6E5; --warn: #7A4B00;   /* Hinweis-Boxen (z. B. Risiken) */

  /* ---------- Schrift ---------- */
  --f-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-body: 18px;        /* 17px unter 640px */
  --fs-small: 15px;
  --fs-label: 12.5px;     /* Mono, Großbuchstaben, letter-spacing .07em */
  --fs-h1: clamp(34px, 5.2vw, 76px);
  --fs-h1-hero: clamp(46px, 6.2vw, 96px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: clamp(21px, 1.8vw, 26px);
  --lh-body: 1.6;
  --lh-head: 1.06;
  --w-thin: 200; --w-light: 300; --w-regular: 400; --w-semibold: 600; --w-bold: 700;

  /* ---------- Raster & Abstände ---------- */
  --max: 1280px;
  --prose: 46rem;                         /* Lesebreite Eingriffsseiten */
  --gutter: clamp(18px, 4vw, 56px);
  --block: clamp(72px, 9vw, 132px);       /* vertikaler Abstand großer Sektionen */
  --block-sm: clamp(44px, 6vw, 80px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---------- Form ---------- */
  --radius: 2px;          /* fast eckig — Markenmerkmal */
  --hdr-h: 84px;          /* 68px unter 640px */
  --shadow-pop: 0 30px 60px rgba(0, 0, 0, .35);

  /* ---------- Bewegung ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .2s; --t: .35s; --t-slow: .6s;

  /* ---------- Ebenen ---------- */
  --z-scrim: 40; --z-mbar: 45; --z-mega: 49; --z-hdr: 50; --z-drawer: 60;

  color-scheme: light;
}
/* Breakpoints (in Media Queries, CSS-Variablen gehen dort nicht): 1080px = Tablet/Burger-Menü, 640px = Mobil + Sticky-Bar. */