/* ============================================================
   PODAVIA — Design Tokens (Single Source of Truth)
   Diese Datei definiert alle Marken-Variablen. Jede Website-
   Seite und jede Komponente bezieht Farben, Schrift, Abstände
   und Radien NUR von hier. Werte ändern? Nur hier ändern.
   Spiegelt 1:1 den Style Guide (brand/Style Guide.html).
   ============================================================ */

/* Schriften werden self-hosted geladen (DSGVO, ohne Google-CDN) —
   siehe assets/fonts.css, das in jeder Seite VOR tokens.css steht. */

:root {
  /* — Primärfarbe: Teal — */
  --teal-700: #0B5E5B;   /* Hover, Akzenttext auf hell */
  --teal-600: #11817A;   /* Primärfarbe, Buttons */
  --teal-400: #4DA39C;   /* Linien, Diagramme */
  --teal-100: #E4F1E9;   /* Flächen, Badges */
  --teal-50:  #F2F8F5;   /* Hover, Highlight */

  /* — Warme Neutraltöne — */
  --ink:    #1B2E2A;     /* Überschriften */
  --n-700:  #3A463F;     /* kräftiger Text */
  --body:   #56635C;     /* Fließtext */
  --n-400:  #8B948B;     /* Meta, Captions */
  --line:   #EEEEE4;     /* Rahmen, Trenner */
  --bg:     #FCFBF5;     /* Standard-Bühne (Off-White) */
  --surface:#FFFFFF;     /* erhöhte Fläche: Karten, Inputs, Kontrast-Sektionen */

  /* — Support — */
  --sand-100: #F3ECDD;   /* warme Fläche, sparsam */

  /* — Schatten — */
  --shadow:    0 8px 30px rgba(27,46,42,0.10);
  --shadow-sm: 0 1px 3px rgba(27,46,42,0.08), 0 4px 16px rgba(27,46,42,0.05);

  /* — Typografie — */
  --font: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type-Skala (px) */
  --fs-display: 58px;  --fs-h1: 44px;  --fs-h2: 32px;  --fs-h3: 22px;
  --fs-lead: 19px;     --fs-body: 16.5px;  --fs-small: 14.5px;  --fs-eyebrow: 13px;

  /* — Spacing-Skala (4px-Basis) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px;

  /* — Eckenradien — */
  --r-input: 8px;  --r-chip: 12px;  --r-card: 16px;  --r-image: 20px;  --r-pill: 999px;

  /* — Layout — */
  --container: 1200px;
}