/* ============================================================
   MedaCom – Design Tokens
   Generiert aus Figma-Datei: fgId6O2tgbG5m7pvVdRvCJ
   ============================================================ */

:root {

  /* ── Farben ─────────────────────────────────────────────── */

  --color-primary:       #DA262D;  /* Brand-Rot — CTAs, Buttons, Highlights */
  --color-primary-dark:  #BC2E24;  /* Brand-Rot Hover / Dunklere Variante */
  --color-dark:          #282828;  /* Fast Schwarz — Dunkle Sections, Headlines */
  --color-teal:          #3C766E;  /* Teal / Dunkelgrün — Footer-Links, Akzente */
  --color-gray-mid:      #7B7B7B;  /* Mittelgrau — Fließtext-Varianten, Beschriftungen */
  --color-gray-light:    #BBBBBB;  /* Hellgrau — Borders, dezente UI-Elemente */
  --color-bg-light:      #FBFBFB;  /* Off-White — Helle Section-Hintergründe */
  --color-white:         #FFFFFF;  /* Weiß — Standard-Hintergrund, Text auf dunkel */
  --color-black:         #000000;  /* Schwarz — Starke Kontraste */


  /* ── Schrift-Familien ───────────────────────────────────── */

  /* Raleway: Große Überschriften, Hero-Text, Seitenheadings */
  --font-headline:  'Raleway', Arial, sans-serif;

  /* Alvar Pro: Subheadings, CTA-Buttons, Hervorhebungen */
  /* Lizenz-Font — muss separat eingebunden werden (kein Google Fonts) */
  --font-sub:       'Alvar Pro', 'Raleway', Arial, sans-serif;

  /* Inter: Body-Text, Navigation, Formulare, allgemeiner Fließtext */
  --font-body:      'Inter', Arial, sans-serif;

  /* Roboto: Footer-Links, Fußzeilen, kleinere UI-Labels */
  --font-footer:    'Roboto', Arial, sans-serif;


  /* ── Typografie-Größen ──────────────────────────────────── */

  /* Hero / Seiten-Hauptüberschrift */
  --text-hero:        56px;   /* Raleway 800, LH ~64px */

  /* H1 */
  --text-h1:          40px;   /* Raleway 700, LH ~48px */

  /* H2 */
  --text-h2:          32px;   /* Raleway 700, LH ~40px */

  /* H3 / Section-Titel */
  --text-h3:          26px;   /* Raleway 600, LH ~34px */

  /* H4 / Subheading */
  --text-h4:          22px;   /* Alvar Pro 500 / Raleway 600, LH ~30px */

  /* Intro-Text / Lead */
  --text-lead:        18px;   /* Inter 400, LH ~30px */

  /* Fließtext Standard */
  --text-body:        16px;   /* Inter 400, LH ~26px */

  /* Small / Caption */
  --text-small:       14px;   /* Inter 400 / Roboto 400, LH ~22px */

  /* Footer / Labels */
  --text-footer:      13px;   /* Roboto 400/700, LH ~20px */

  /* Micro / Rechtliches */
  --text-micro:       11px;   /* Inter 400, LH ~18px */


  /* ── Typografie-Gewichte ────────────────────────────────── */

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;


  /* ── Zeilenhöhen ────────────────────────────────────────── */

  --lh-tight:   1.2;   /* Headlines, Hero */
  --lh-heading: 1.3;   /* Überschriften H2–H4 */
  --lh-normal:  1.5;   /* Standard Body-Text */
  --lh-relaxed: 1.625; /* Langer Fließtext, gute Lesbarkeit */
  --lh-loose:   1.8;   /* Kleine Schriftgrößen, Caption */


  /* ── Abstände (Spacing-Scale) ───────────────────────────── */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;


  /* ── Breiten ────────────────────────────────────────────── */

  --container-max:  1125px;   /* Maximale Content-Breite (exakt Figma: Group 52, w:1125) */
  --container-text:  720px;   /* Optimale Lesebreite für Fließtext */


  /* ── Transitions ────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

}