/* Design-Tokens – SPENER Ziviltechniker
   Farbwelt der Marke: Weiß, Schwarz, Rot (Bautafel ≈ #C51517) mit warmen Grautönen.
   Kontrastpaare werden in tests/accessibility.test.mjs gegen WCAG AA geprüft. */

:root {
  /* Farbe */
  --color-red: #C51517;
  --color-red-deep: #9F1113;
  --color-ink: #141312;
  --color-ink-soft: #3B3834;
  --color-muted: #625D56;
  --color-paper: #FFFFFF;
  --color-paper-warm: #F4F1EC;
  --color-stone: #E7E2DA;
  --color-line: #D6D0C6;
  --color-on-dark: #F4F1EC;
  --color-on-dark-muted: #B8B1A7;
  --color-line-on-dark: #3F3B37;
  --color-focus: #141312;
  --color-focus-on-dark: #FFFFFF;
  --color-grid: rgb(20 19 18 / 0.055);

  /* Schrift – ausschließlich lokal installierte Systemschriften */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluide Typo-Skala (320 px → 1440 px) */
  --step--2: 0.75rem;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.21rem + 0.8vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.43rem + 1.6vw, 2.875rem);
  --step-4: clamp(1.875rem, 1.3rem + 2.9vw, 4rem);
  --step-5: clamp(2.125rem, 1.25rem + 4.4vw, 5.25rem);

  /* Abstände */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-section: clamp(4rem, 3rem + 5vw, 8.5rem);

  /* Raster */
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
  --header-h: 4rem;
  --grid-cell: 1.5rem;

  /* Interaktion */
  --target-min: 2.75rem; /* 44 px */
  --rule: 1px solid var(--color-line);
  --rule-strong: 1px solid var(--color-ink);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration: 180ms;
}