/* ============================================================
   tokens.css — Design-Tokens als CSS Custom Properties
   ============================================================ */

:root {
  /* ---- Farben ---- */
  --color-bg-primary: #121212;   /* Seitenhintergrund, Header, Footer */
  --color-bg-dark: #0f1617;      /* dunkle Karten, Spielsektionen */
  --color-accent: #009ca9;       /* aktive Buttons, Badges, Akzente */
  --color-white: #ffffff;        /* heller Text auf dunklem Grund */
  --color-text: #a4a4a4;         /* Fließtext, Menü, Beschreibungen */
  --color-heading: #f8c64e;      /* H2, Sektionsnamen, gold. Akzent */
  --color-btn-text: #ffffff;     /* Text in CTA-Buttons */
  --color-card: #181818;         /* Karten, Panels, Content-Blöcke */
  --color-cold: #394950;         /* Nav-Panels, Tabs, Trennlinien */
  --color-card-2: #0f1617;       /* zweiter Kartenhintergrund */

  /* Gradienten */
  --btn-primary: linear-gradient(180deg, #09272b 0%, #3e9fad 50%, #09272b 100%);
  --btn-secondary: linear-gradient(180deg, #0f1617 0%, #688091 51%, #2b313b 100%);

  /* Zustände */
  --color-border: #263238;
  --color-heading-soft: #ffd980;
  --focus-ring: 2px solid var(--color-heading);

  /* ---- Typografie ---- */
  --font-body: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Norse", "Cabin", system-ui, sans-serif;

  --fs-base: clamp(0.9375rem, 1.4vw, 1rem);   /* 15–16px */
  --fs-h1: clamp(2.125rem, 5vw, 2.875rem);    /* 34–46px */
  --fs-h2: clamp(1.625rem, 3.4vw, 2.125rem);  /* 26–34px */
  --fs-h3: clamp(1.25rem, 2.2vw, 1.5rem);     /* 20–24px */
  --fs-small: clamp(0.8125rem, 1.2vw, 0.875rem);

  --lh: 1.6;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ---- Abstände / Raster ---- */
  --space-section: clamp(2.5rem, 5vw, 3.75rem); /* 40–60px zwischen Sektionen */
  --space-card-gap: 1.25rem;   /* 20px zwischen Karten */
  --space-para: 1.25rem;       /* 20px zwischen Absätzen */
  --space-h2-text: 1.25rem;    /* 20px H2 -> Text */
  --space-h3-text: 1rem;       /* 16px H3 -> Text */
  --space-faq: 0.875rem;       /* 14px zwischen FAQ-Items */
  --pad-card: 1.5rem;          /* 24px innerer Kartenabstand */
  --container: 1440px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* Abgeschnittene Ecke statt border-radius */
  --clip-corner: polygon(100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 0);

  /* Übergänge */
  --transition: 0.25s ease;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  --header-h: 76px;
}