/* ==========================================================================
   Design-Tokens — Walter & Fuhlenriede
   Die "einzige Wahrheit" für Farben, Typografie, Abstände.
   Aus docs/05-designsystem.md. Werte hier ändern = ganze Website ändert sich.
   ========================================================================== */

:root {
  /* --- Farben: Marke --- */
  --navy-900: #0D2A4E;
  --navy-700: #123B6A;
  --navy-500: #2E5A93;
  --teal-600: #0F918D;
  --teal-500: #18B6B2;
  --teal-100: #DFF6F5;
  --amber-600: #D97F06;
  --amber-500: #F59E0B;
  --amber-100: #FEF1D9;
  --ink-900: #1E293B;
  --ink-600: #475569;
  --ink-400: #94A3B8;
  --line-200: #E2E8F0;
  --paper-50: #F8FAFC;
  --white: #FFFFFF;

  /* --- Farben: semantisch (so im Code verwenden) --- */
  --color-primary: var(--navy-700);
  --color-primary-dark: var(--navy-900);
  --color-cta: var(--amber-500);
  --color-cta-hover: var(--amber-600);
  --color-cta-text: #412402;
  --color-applicant: var(--teal-500);
  --color-applicant-hover: var(--teal-600);
  --color-bg: var(--paper-50);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-border: var(--line-200);

  /* --- Typografie --- */
  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.375rem, 1.6rem + 3.4vw, 3.5rem); /* 38 -> 56 */
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);         /* 32 -> 44 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);    /* 26 -> 34 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);       /* 20 -> 24 */
  --fs-lead: 1.25rem;   /* 20 */
  --fs-body: 1.125rem;  /* 18 */
  --fs-small: 0.9375rem;/* 15 */
  --fs-caption: 0.8125rem;/* 13 */

  /* --- Abstände (4px-Basis) --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;
  --space-32: 8rem;

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --container: 1200px;
  --measure: 65ch;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* --- Schatten --- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 48px rgba(18,59,106,.12);

  /* --- Motion --- */
  --dur: 240ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  --header-h: 76px;
}