/* ═══════════════════════════════════════════════════════════════
   Wortlvst · Design Tokens
   Einzige Quelle für Farben, Typografie, Abstände, Radien, Motion.
   Alle anderen Schichten konsumieren ausschließlich diese Tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Farbwelt: „Boutique-Hotel um Mitternacht“ ──
     Tiefes Pflaume/Aubergine als Bühne, Rosé als sinnlicher Akzent,
     Gold sparsam für Exklusivität. Alle Text/Hintergrund-Paare
     erfüllen WCAG 2.2 AA (≥ 4.5:1 Fließtext, ≥ 3:1 Großtext/UI). */
  --color-bg:          #191019;
  --color-bg-deep:     #120b12;
  --color-surface:     #241628;
  --color-surface-2:   #2e1c31;
  --color-line:        rgba(231, 163, 184, 0.14);
  --color-line-strong: rgba(231, 163, 184, 0.30);

  --color-text:        #f4ecf2;
  --color-text-muted:  #cbb6c8;
  --color-text-soft:   #a98da6;

  --color-rose:        #e7a3b8;
  --color-rose-bright: #f0b7c8;
  --color-rose-deep:   #b96b8c;
  --color-on-rose:     #2a1420;

  --color-gold:        #d9ac7a;
  --color-wine:        #6e2c4f;
  --color-plum:        #3a1f3d;

  --color-error:       #f2a6a6;
  --color-focus:       #f0b7c8;

  /* ── Verläufe ── */
  --gradient-brand: linear-gradient(135deg, var(--color-wine) 0%, var(--color-plum) 55%, var(--color-bg) 100%);
  --gradient-cta:   linear-gradient(135deg, #f0b7c8 0%, #e7a3b8 55%, #d98ba7 100%);

  /* ── Typografie ── */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;

  /* Fluide Typo-Skala (Minor Third, clamp zwischen 360px und 1280px) */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-lg:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-2xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);

  --leading-tight: 1.12;
  --leading-snug:  1.35;
  --leading-body:  1.65;

  --tracking-wide: 0.18em;

  /* ── Abstände (8er-Raster) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-gap: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* ── Geometrie ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container-max: 72rem;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ── Elevation ── */
  --shadow-card: 0 8px 30px rgba(10, 4, 10, 0.45);
  --shadow-pop:  0 18px 60px rgba(10, 4, 10, 0.6);
  --shadow-glow: 0 0 80px rgba(231, 163, 184, 0.12);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
}