/* ==========================================================================
   Design Tokens — apr training
   Farben, Fonts, Abstände als CSS-Variablen. Keine Komponenten-Styles hier.
   ========================================================================== */
:root {
  /* Farben — Hintergrund (dunkler Teal-Verlauf) */
  --color-bg-950: #0a0e0e;
  --color-bg-900: #131c1c;
  --color-bg-800: #2a3838;
  --color-bg-gradient: linear-gradient(180deg, var(--color-bg-800) 0%, var(--color-bg-900) 45%, var(--color-bg-950) 100%);

  /* Farben — Marke / Akzent */
  --color-teal-400: #5ecfce;
  --color-teal-500: #20adac;
  --color-teal-600: #178584;
  --color-teal-glow: rgba(32, 173, 172, 0.2);

  /* Farben — Oberflächen */
  --color-surface: rgba(10, 14, 14, 0.55);
  --color-surface-strong: rgba(10, 14, 14, 0.5);
  --color-surface-tint: rgba(32, 173, 172, 0.12);

  /* Farben — Text */
  --color-white: #ffffff;
  --color-text: #ffffff;
  --color-text-85: rgba(255, 255, 255, 0.85);
  --color-text-65: rgba(255, 255, 255, 0.65);
  --color-text-55: rgba(255, 255, 255, 0.55);
  --color-text-45: rgba(255, 255, 255, 0.45);

  /* Farben — Rahmen */
  --color-border: rgba(255, 255, 255, 0.25);
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-border-teal: rgba(94, 207, 206, 0.25);
  --color-border-teal-strong: rgba(94, 207, 206, 0.35);
  --color-border-teal-solid: var(--color-teal-500);

  /* Schatten */
  --shadow-teal-sm: 0 8px 30px rgba(32, 173, 172, 0.35);
  --shadow-teal-lg: 0 0 40px rgba(32, 173, 172, 0.2);

  /* Fonts */
  --font-sans: 'Archivo', system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Schriftgrößen — mobile-first Basiswerte, wachsen per Media Query in components.css */
  --fs-xs: 0.7rem;      /* 11.2px  Meta/Labels */
  --fs-sm: 0.78rem;     /* 12.5px  Kleine Labels */
  --fs-base: 0.9rem;    /* 14.4px  Fließtext */
  --fs-md: 1rem;        /* 16px    Fließtext groß */
  --fs-lg: 1.2rem;      /* 19.2px  Zitat/Hervorhebung */
  --fs-xl: 1.4rem;      /* 22.4px  Kartentitel */
  --fs-2xl: 1.8rem;     /* 28.8px  Sektionstitel mobil */
  --fs-3xl: 2.4rem;     /* 38.4px  Sektionstitel desktop */
  --fs-4xl: 3rem;       /* 48px    Hero mobil */
  --fs-5xl: 5.25rem;    /* 84px    Hero desktop */

  /* Abstände — 4px-Skala */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.5rem;    /* 40px */
  --space-10: 3.5rem;   /* 56px */
  --space-11: 4rem;     /* 64px */
  --space-12: 5.25rem;  /* 84px */

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Breakpoints (nur als Referenz, Media Queries können keine Variablen nutzen) */
  --bp-sm: 560px;
  --bp-md: 780px;
  --bp-lg: 1080px;
}