/* ==========================================================================
   KOBIL — Design Tokens (aus Figma-Variablen, D-Homepage)
   ========================================================================== */

:root {
  /* ---- Farben: System / Navy-Skala ---- */
  --navy: #11244a;        /* System/100% — Primärtext, dunkle Flächen */
  --navy-80: #3d4c6a;     /* System/80% */
  --navy-70: #586680;     /* System/70% — Sekundärtext */
  --navy-60: #b9c1d1;     /* System/60% — Disabled / dezente Icons */
  --navy-40: #e2e7f2;     /* System/40% — Linien, Borders */
  --navy-30: #eff2f8;     /* System/30% — helle Flächen */
  --navy-20: #f5f7fc;     /* System/20% — hellste Flächen / Section-BG */

  /* ---- Farben: Brand ---- */
  --blue: #2962f6;        /* Primary/Go Blue — CTAs, Akzente */
  --white: #ffffff;
  --pink: #ca80f4;        /* Secondary/Pink */
  --green: #1dac76;       /* Secondary/Green */
  --red: #eb5757;         /* Semantic/Red */

  /* ---- Transparenzen ---- */
  --white-70: rgba(255, 255, 255, 0.7);
  --white-20: rgba(255, 255, 255, 0.2);
  --black-10: rgba(35, 41, 53, 0.1);
  --black-70: rgba(35, 41, 53, 0.7);

  /* ---- Typografie ---- */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Größen (Desktop): H1 50/62 · H2 40/50 · H4 28/36 · Title2 20/26 ·
     Title3 18/24 · Body L 18/26 · Body M 16/23 · Body S 14/20 · Tagline 12/18 */

  /* ---- Radien ---- */
  --radius-card: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 100px;

  /* ---- Layout ---- */
  --page-max: 1440px;
  --page-pad: 40px;
  --content-max: 1360px;
  --section-gap: 20px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.25s;
}