/* ============================================================
   01-TOKENS.CSS
   Design-Tokens
   ------------------------------------------------------------
   Diese Datei enthält alle zentralen Design-Werte als
   CSS Custom Properties.

   Alle weiteren CSS-Module greifen ausschließlich auf diese
   Variablen zu. Dadurch lassen sich Farben, Abstände,
   Schriftgrößen und weitere Design-Werte zentral anpassen.
   ============================================================ */

:root {

  /* ==========================================================
     FARBEN
     ========================================================== */

  /* Primäre Markenfarbe */
  --cd-color-primary: #D7DE50;

  /* Dunklere Variante für Hover-Zustände */
  --cd-color-primary-soft: #C5CC3F;

  /* Transparente Variante für dezente Hintergründe */
  --cd-color-primary-tint: rgba(215, 222, 80, 0.10);

  /* Haupt-Hintergrundfarbe der Website */
  --cd-color-bg: #24131A;

  /* Hintergrundfarbe für Cards und hervorgehobene Flächen */
  --cd-color-surface: #2E1821;

  /* Standardfarbe für Überschriften und Haupttexte */
  --cd-color-text: #FAFAFA;

  /* Gedämpfte Textfarbe für Auszüge, Autor und Datum */
  --cd-color-text-muted: #DDDDDD;

  /* Textfarbe auf Elementen mit Primärfarbe */
  --cd-color-text-on-primary: #1B1115;

  /* Dezente Rahmen und Trennlinien */
  --cd-color-border: rgba(255, 255, 255, 0.12);


  /* ==========================================================
     TYPOGRAFIE
     ========================================================== */

  /* Schriftfamilien */
  --cd-font-family: "Montserrat", Arial, sans-serif;
  --cd-font-heading: "Montserrat", Arial, sans-serif;
  --cd-font-body: "Montserrat", Arial, sans-serif;
  --cd-font-accent: "Bebas Neue", "Montserrat", Arial, sans-serif;

  /* Schriftgewichte */
  --cd-fw-regular: 400;
  --cd-fw-medium: 500;
  --cd-fw-semibold: 600;
  --cd-fw-bold: 700;

  /* Überschriftengrößen */
  --cd-fs-h1: 3.5rem;       /* 56px */
  --cd-fs-h2: 2.5rem;       /* 40px */
  --cd-fs-h3: 2rem;         /* 32px */
  --cd-fs-h4: 1.5rem;       /* 24px */
  --cd-fs-h5: 1.1rem;       /* 17.6px */
  --cd-fs-h6: 1rem;         /* 16px */

  /* Allgemeine Textgrößen */
  --cd-fs-body: 1rem;       /* 16px */
  --cd-fs-small: 0.9rem;    /* 14.4px */

  /* Direkt im Magazin-CSS verwendete Größen */
  --cd-fs-xs: 0.81rem;      /* Datum und kleine Metadaten */
  --cd-fs-sm: 0.9rem;       /* Weiterlesen und Autor */
  --cd-fs-md: 1rem;         /* Auszug und Fließtext */

  /* Zeilenhöhen */
  --cd-lh-tight: 1;
  --cd-lh-normal: 1.5;
  --cd-lh-relaxed: 1.5;


  /* ==========================================================
     ABSTÄNDE
     ========================================================== */

  --cd-space-2xs: 4px;
  --cd-space-xs: 8px;
  --cd-space-sm: 12px;
  --cd-space-md: 30px;
  --cd-space-lg: 20px;
  --cd-space-xl: 24px;

  /* Wird im Magazin-Grid als Abstand zwischen den Cards verwendet */
  --cd-space-2xl: 20px;

  --cd-space-3xl: 64px;


  /* ==========================================================
     BORDER-RADIUS
     ========================================================== */

  --cd-radius-sm: 8px;
  --cd-radius-md: 12px;
  --cd-radius-lg: 16px;
  --cd-radius-pill: 999px;


  /* ==========================================================
     SCHATTEN
     ----------------------------------------------------------
     Die aktuellen Cards verwenden keine Schatten.
     Die Variablen bleiben für eine spätere Erweiterung bestehen.
     ========================================================== */

  --cd-shadow-sm: none;
  --cd-shadow-md: none;
  --cd-shadow-lg: none;


  /* ==========================================================
     TRANSITIONEN
     ========================================================== */

  --cd-transition-fast: 150ms ease;
  --cd-transition-base: 250ms ease;
  --cd-transition-slow: 400ms ease;


  /* ==========================================================
     LAYOUT
     ========================================================== */

  --cd-container-max: 1200px;
  --cd-container-padding: var(--cd-space-md);

  /* Kategorie-Badges */
--cd-color-category-bg: #4A313B;
--cd-color-category-text: #FAFAFA;
--cd-color-category-border: rgba(255, 255, 255, 0.14);

--cd-color-category-hover-bg: rgba(46, 24, 33, 0.45);
--cd-color-category-hover-border: rgba(255, 255, 255, 0.22);
}