/* =============================================================
   tokens.css — Design-Tokens
   Farben, Typo-Skala, Abstände, Breakpoints.
   Alle Werte 1:1 aus dem alten Elementor-Kit übernommen.
   ============================================================= */

:root {
  /* ---------- Farben ---------- */
  --c-bg:            #000000;   /* Seitenhintergrund */
  --c-surface:       #181818;   /* Karten, Footer */
  --c-surface-alt:   #3A3A3A;
  --c-surface-mute:  #484848;

  --c-text:          #D8D8D8;   /* Fließtext */
  --c-text-strong:   #FFFFFF;   /* Überschriften */
  --c-text-mute:     #777777;

  --c-accent:        #F7C000;   /* Signalgelb (Primärakzent) */
  --c-accent-soft:   #FFE779;
  --c-accent-warm:   #FFBE00;
  --c-accent-orange: #FFA33E;
  --c-accent-sand:   #FAB466;
  --c-gold:          #A28B68;   /* Hover auf Gelb-Buttons */
  --c-gold-dark:     #8C6D00;

  --c-line:          rgba(255, 255, 255, .12);
  --c-overlay:       rgba(0, 0, 0, .36);

  /* ---------- Schrift-Familien ---------- */
  --f-display:  "Tahoma", Verdana, sans-serif;   /* Headlines, Navigation */
  --f-heading:  "Assistant", sans-serif;         /* Sub-Headlines, Zahlen */
  --f-body:     "Roboto", sans-serif;            /* Fließtext */
  --f-script:   "Tangerine", cursive;
  --f-alt:      "Outfit", sans-serif;            /* nur Creator-Profile + /management/ */

  /* ---------- Typo-Skala (Desktop ≥1025px) ----------
     Die Skala kippt in base.css auf Tablet-/Mobilwerte.        */
  --fs-h1: 4.2rem;   /* 67.2px */
  --fs-h2: 2.6rem;   /* 41.6px */
  --fs-h3: 2rem;     /* 32px   */
  --fs-h4: 1.6rem;   /* 25.6px */
  --fs-h5: 1.3rem;   /* 20.8px */
  --fs-h6: 0.9rem;   /* 14.4px */

  --fs-display-xxl: 9rem;
  --fs-display-xl:  7rem;
  --fs-display:     4rem;
  --fs-script:      8rem;

  --fs-body:    1rem;
  --fs-body-sm: 0.9rem;
  --fs-lead:    1.2rem;
  --fs-eyebrow: 1.3rem;   /* gesperrte Kleinüberschrift */

  --lh-tight: 1em;
  --lh-base:  1.5em;
  --ls-wide:  5px;
  --ls-wider: 10px;

  /* ---------- Raster & Abstände ---------- */
  --container:      1300px;
  --container-pad:  20px;

  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  20px;
  --space-md:  40px;
  --space-lg:  60px;
  --space-xl:  100px;

  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --shadow-header: 0 0 10px 0 rgba(5, 5, 5, .65);
  --shadow-btn:    0 0 10px 0 rgba(0, 0, 0, .5);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .3s;

  --header-h: 227px;   /* Höhe der Kopfzeile auf Desktop */
}

/* ---------- Tablet: 768–1024px ---------- */
@media (max-width: 1024px) {
  :root {
    --container:  1024px;
    --fs-h1: 3.1rem;
    --fs-h2: 2rem;
    --fs-h3: 1.3rem;
    --fs-h4: 1.2rem;
    --fs-h5: 1rem;
    --fs-h6: 0.8rem;

    --fs-display-xxl: 6rem;
    --fs-display-xl:  6rem;
    --fs-display:     3.1rem;
    --fs-script:      5.1rem;

    --fs-body:    0.9rem;
    --fs-body-sm: 0.8rem;
    --fs-lead:    1.1rem;
    --fs-eyebrow: 1rem;
  }
}

/* ---------- Mobil: ≤767px ---------- */
@media (max-width: 767px) {
  :root {
    --container:  767px;
    --container-pad: 10px;
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;

    --fs-display-xxl: 5rem;
    --fs-display-xl:  5rem;
    --fs-display:     2.5rem;
    --fs-script:      4.4rem;

    --header-h: auto;
  }
}