/* ============================================================
   tokens.css — Design Tokens
   Heidi Schimmel Hypnose

   FARBEN ANPASSEN: Nur diese Datei bearbeiten.
   Alle anderen CSS-Dateien referenzieren ausschließlich
   diese Variablen — niemals Hex-Werte direkt.
   ============================================================ */

:root {

  /* ── Palette: Bauhaus Terrakotta ──────────────────────────
     Um das Farbschema komplett zu tauschen:
     accent + accent-light + accent-pale ersetzen reicht meistens.
  ─────────────────────────────────────────────────────────── */
  --color-bg:           #E8F0F5;   /* Seitenhintergrund (Eisblau) */
  --color-bg-dark:      #1A1A1A;   /* Dunkle Sections (Footer, CTA-Block) */
  --color-bg-dark-mid:  #222222;   /* Mittlere dunkle Flächen falls nötig */

  --color-text:         #1A1A1A;   /* Primärer Fließtext */
  --color-text-muted:   #6B6560;   /* Sekundärer Text, Beschreibungen */
  --color-text-inv:     #E8F0F5;   /* Text auf dunklem Hintergrund */
  --color-text-dark:    #555555;   /* Footer-Text, Legal */

  --color-accent:       #872B5C;   /* Raspberry Radiance 19-2432 */
  --color-accent-light: #D4622A;   /* Burning Orange 16-1448 */
  --color-accent-pale:  #C8DCE8;   /* Eisblau pale — Hover-Flächen */

  --color-line:         #D0CCC8;   /* Trennlinien auf hellem Hintergrund */
  --color-line-dark:    #2E2E2E;   /* Trennlinien auf dunklem Hintergrund */
  --color-orange:       #D4622A;   /* Burning Orange — Balken, Akzentlinien */
  --color-orange-pale:  #F5DDD0;   /* Sehr helles Orange — Flächen */

  /* ── Typografie ──────────────────────────────────────────── */
  --font-head:   'Josefin Sans', sans-serif;   /* Headlines, Nav, Labels, Buttons */
  --font-body:   'Lora', Georgia, serif;        /* Fließtext, Beschreibungen */

  /* ── Font Sizes (clamp-fähig) ────────────────────────────── */
  --text-2xs:  0.65rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  /* ── Letter Spacing ─────────────────────────────────────── */
  --tracking-tight:  -0.025em;
  --tracking-base:    0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:     1200px;
  --nav-h:     64px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --duration:  0.25s;
  --duration-slow: 0.65s;

  /* ── Bauhaus: keine border-radius ─────────────────────────
     Falls runde Ecken gewünscht: hier eintragen.
  ─────────────────────────────────────────────────────────── */
  --radius: 0px;
}