/* ==========================================================================
   RSP Advice — Design Tokens
   Alle Farben, Abstände und Schriftgrößen der Website liegen hier.
   Wer etwas global ändern will, ändert es an dieser Stelle.
   ========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------
     Navy und Greige sind exakt aus dem Bestandslogo entnommen.
     Slate ist als einziger Interaktionsfarbton ergänzt (Links, Fokus). */
  --navy-900: #1b2130;
  --navy-700: #30384d;   /* Markenfarbe aus dem Logo */
  --navy-500: #4a5470;
  --navy-300: #7d859b;

  --slate-700: #3a5568;
  --slate-600: #4c6b85;  /* Links, Akzente — 5,7:1 auf Weiß */
  --slate-100: #e3ecf2;

  --greige-500: #b6b7a7; /* Zweitfarbe aus dem Logo */
  --greige-300: #d4d5cb;
  --greige-200: #e7e7e0;
  --greige-100: #f4f4ef;

  --ink: #232936;        /* Fließtext */
  --ink-muted: #5c6472;  /* Sekundärtext — 6,1:1 auf Weiß */
  --paper: #ffffff;

  /* --- Semantische Zuweisungen ------------------------------------------ */
  --bg: var(--paper);
  --bg-soft: var(--greige-100);
  --bg-dark: var(--navy-700);
  --text: var(--ink);
  --text-soft: var(--ink-muted);
  --line: var(--greige-300);
  --link: var(--slate-600);
  --link-hover: var(--slate-700);
  --focus: var(--slate-600);

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(2rem, 1.4rem + 2.4vw, 3.35rem);
  --fs-h2:    clamp(1.75rem, 1.30rem + 1.9vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1.12rem + 0.6vw, 1.55rem);
  --fs-h4:    clamp(1.05rem, 1.00rem + 0.25vw, 1.2rem);
  --fs-lead:  clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.75;

  /* --- Abstände (8-px-Raster) -------------------------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Sektionsabstand: mobil kompakt, Desktop großzügig */
  --section-y: clamp(4rem, 2.5rem + 6vw, 10rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* --- Maße -------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --measure: 68ch;

  --radius: 3px;
  --radius-lg: 6px;

  --header-h: 76px;

  /* --- Schatten & Übergänge ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(27, 33, 48, 0.06), 0 2px 8px rgba(27, 33, 48, 0.04);
  --shadow-md: 0 2px 4px rgba(27, 33, 48, 0.06), 0 8px 24px rgba(27, 33, 48, 0.08);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 240ms;
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}