/* Design-Tokens — die einzige Stelle für Farben, Maße, Radien, Schatten.
   Farbe ändern = hier ändern. Nie im Markup suchen. */

:root{

  /* ── Farben ───────────────────────────────────────────────────────────
     Navy & Messing-Gold. Bewusst kein Versicherungsblau: seriös und wertig */

  --petrol:#1f2d54;          /* Navy, Hauptfarbe */
  --petrol-700:#141d3a;      /* dunkler, Sektion Ablauf */
  --petrol-900:#0d1429;      /* Footer */

  --amber:#c9a14c;           /* Messing-Gold, Akzent */
  --amber-deep:#94742a;      /* Akzent dunkel, Symbole */
  --amber-text:#836725;      /* Gold als Text auf hellem Grund.
                                Nicht aufhellen — darüber fällt der
                                Kontrast unter die geforderten 4,5:1. */
  --amber-soft:#efe3c4;      /* Akzent hell, Flächen */

  --ink:#161922;             /* Fließtext */
  --ink-soft:#525a6b;        /* Sekundärtext */
  --mist:#edeff3;            /* Seitenhintergrund, Perlgrau */
  --paper:#fbfcfd;           /* Karten, helle Sektionen */
  --line:#dde1e8;            /* Rahmenlinien */

  /* Als RGB-Tripel, damit Transparenzen aus derselben Quelle entstehen.
     Verwendung:  rgb(var(--petrol-rgb) / .06) */
  --petrol-rgb:31 45 84;
  --petrol-900-rgb:13 20 41;
  --mist-rgb:237 239 243;
  --amber-rgb:201 161 76;
  --amber-deep-rgb:148 116 42;
  --ink-soft-rgb:82 90 107;

  /* ── Schriftstufen ───────────────────────────────────────────────────
     8 Stufen, modular. Oben viel Kontrast (die Seite soll eine klare */

  --t-2xs:.75rem;            /* Eyebrow, Pill, Bildlegende */
  --t-xs:.875rem;            /* Meta, Fußzeile, Hilfstext */
  --t-sm:.9375rem;           /* Navigation, Sekundärtext */
  --t-base:1rem;             /* Fließtext */
  --t-md:1.125rem;           /* Lead, Einleitungen */
  --t-lg:1.375rem;           /* H3, Kartentitel */
  --t-xl:clamp(1.875rem,3.4vw,2.75rem);   /* H2 */
  --t-2xl:clamp(2.375rem,6.2vw,4.5rem);   /* H1 */

  /* Ordnungszahlen — tragendes Gestaltungselement statt Icon-Kachel */
  --t-num:clamp(2.75rem,5.5vw,4.25rem);

  --lh-tight:1.04;           /* Überschriften */
  --lh-snug:1.28;            /* H3, kurze Zeilen */
  --lh-base:1.62;            /* Fließtext */

  --ls-tight:-.022em;        /* große Überschriften */
  --ls-normal:-.01em;
  --ls-wide:.13em;           /* Eyebrow, Versalien */

  /* ── Maße ────────────────────────────────────────────────────────────
     12-Spalten-Raster. Inhalte setzen bewusst asymmetrisch an, statt alles */

  --maxw:1160px;
  --gutter:26px;
  --col-gap:24px;

  --space-section:clamp(72px,7vw,116px);   /* Abstand oben/unten je Sektion */
  --space-block:clamp(34px,4vw,56px);      /* Kopf zu Inhalt */

  /* ── Radien: 3 Stufen + Vollrundung ─────────────────────────────────── */
  --r-sm:10px;               /* Eingabefelder, kleine Chips */
  --r:18px;                  /* Karten */
  --r-lg:28px;               /* große Flächen, Bildrahmen */
  --r-full:999px;            /* Pills, Buttons — bewusst keine Skalenstufe */

  /* ── Schriftvariation ────────────────────────────────────────────────
     Bricolage Grotesque hat zwei Achsen: wght 200–800 und opsz 12–96
     ⚠ opsz MUSS in jeder Regel mitgeschrieben werden. Der fvar-Standard ist
     ⚠ Sobald font-variation-settings mit "wght" an einem Element steht, ist
     font-weight dort UND in allen Nachkommen wirkungslos. Jedes Kind mit
     eigenem Gewicht braucht deshalb eigene font-variation-settings. */
  --vf-display:"opsz" 14,"wght" 300;   /* H1 — Lichtschnitt, offene Formen */
  --vf-accent :"opsz" 14,"wght" 800;   /* die Akzentzeile darin */

  /* ── Bewegung und Tiefe ─────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --hairline:1px solid var(--line);
  --hairline-amber:1px solid rgb(var(--amber-rgb) / .38);

  --shadow-sm:0 1px 2px rgb(var(--petrol-900-rgb) / .05), 0 6px 18px rgb(var(--petrol-900-rgb) / .07);
  --shadow-md:0 4px 10px rgb(var(--petrol-900-rgb) / .07), 0 24px 48px rgb(var(--petrol-900-rgb) / .12);
}