/* ═══════════════════════════════════════════════════════════════
   HAUTRITUALE — Design Tokens · V5 „Rosé-Porzellan & Mokka-Plum"
   Zentrale Variablen für die gesamte Website.
   Die Variablennamen sind identisch mit V4 — alle bestehenden
   Seiten & Inline-Styles funktionieren weiter, nur der Look ist neu.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben: Markenpalette ───────────────────────────────
     Porzellan   #f7f1ee  heller, leicht rosé getönter Grundton
     Rosenholz   #96676c  vertieftes Altrosa (Interaktion, Akzent)
     Mokka-Plum  #2b2024  dunkle Sektionen, Headlines, Footer
     Puder       #eddfdb  weiche Flächen, Karten-Hintergründe   */

  --color-accent:            #96676c;     /* Rosenholz (Hauptakzent) */
  --color-accent-dark:       #7c5358;     /* Hover / aktiv */
  --color-accent-light:      #c8a4a6;     /* Dezent, auf dunklem Grund */
  --color-accent-soft:       #eddfdb;     /* Puder-Fläche */
  --color-accent-lighter:    #f7f1ee;     /* Seiten-Hintergrund */

  /* ── Farben: Neutral ─────────────────────────────────────── */
  --color-ink:               #2b2024;     /* Mokka-Plum (Haupttext) */
  --color-ink-soft:          #5c4c50;     /* Sekundärtext */
  --color-ink-muted:         #95817f;     /* Tertiärtext / Meta */
  --color-line:              #e3d4d0;     /* Trennlinien */
  --color-line-soft:         #efe4e1;     /* Weiche Trennlinien */
  --color-bg:                #f7f1ee;     /* Seiten-Hintergrund: Rosé-Porzellan */
  --color-bg-warm:           #efe1dc;     /* Sektion warm (Puder dunkler) */
  --color-bg-cream:          #fcf8f6;     /* Helles Cream für Karten */
  --color-bg-soft:           #f1e7e3;     /* Weiche Hervorhebung (Akkordeon offen) */
  --color-white:             #ffffff;

  /* ── Farben: Dunkle Sektionen (Mokka-Plum) ──────────────── */
  --color-plum:              #2b2024;     /* Sektion dunkel */
  --color-plum-deep:         #221a1d;     /* Footer / noch dunkler */
  --color-on-plum:           #f4e9e6;     /* Text auf dunkel */
  --color-on-plum-soft:      rgba(244, 233, 230, 0.62);
  --color-on-plum-line:      rgba(244, 233, 230, 0.14);

  /* ── Farben: Status ─────────────────────────────────────── */
  --color-success:           #6b8e7f;
  --color-warning:           #c9a875;
  --color-error:             #b06666;

  /* ── Typografie ─────────────────────────────────────────── */
  --font-display:            'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:               'Figtree', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:               'JetBrains Mono', 'Courier New', monospace;

  --weight-light:            300;
  --weight-regular:          400;
  --weight-medium:           500;
  --weight-semibold:         600;
  --weight-bold:             700;

  --letter-spacing-wide:     0.08em;
  --letter-spacing-wider:    0.18em;
  --letter-spacing-widest:   0.32em;

  /* ── Abstand / Spacing ──────────────────────────────────── */
  --space-3xs:               0.25rem;     /* 4 px */
  --space-2xs:               0.5rem;      /* 8 px */
  --space-xs:                0.75rem;     /* 12 px */
  --space-sm:                1rem;        /* 16 px */
  --space-md:                1.5rem;      /* 24 px */
  --space-lg:                2.5rem;      /* 40 px */
  --space-xl:                4rem;        /* 64 px */
  --space-2xl:               6rem;        /* 96 px */
  --space-3xl:               8rem;        /* 128 px */

  /* ── Container-Breiten ──────────────────────────────────── */
  --container-narrow:        720px;
  --container-reading:       900px;
  --container-default:       1200px;
  --container-wide:          1440px;

  /* ── Radien ─────────────────────────────────────────────── */
  --radius-sm:               6px;
  --radius-md:               12px;
  --radius-lg:               20px;
  --radius-xl:               28px;
  --radius-pill:             999px;

  /* ── Schatten (warm getönt) ─────────────────────────────── */
  --shadow-soft:             0 2px 14px rgba(43, 32, 36, 0.07);
  --shadow-medium:           0 10px 36px rgba(43, 32, 36, 0.10);
  --shadow-strong:           0 18px 56px rgba(43, 32, 36, 0.16);
  --shadow-inset:            inset 0 1px 3px rgba(43, 32, 36, 0.05);

  /* ── Übergänge ──────────────────────────────────────────── */
  --ease-out-soft:           cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast:         160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:         320ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow:         650ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layer / z-index ────────────────────────────────────── */
  --z-base:                  1;
  --z-sticky:                100;
  --z-header:                200;
  --z-actionbar:             300;
  --z-overlay:               900;
  --z-modal:                 1000;
  --z-toast:                 2000;

  /* ── Mobile Action-Bar Höhe (für Body-Padding) ──────────── */
  --actionbar-height:        64px;

  /* ── Breakpoints (als Referenz für JS) ──────────────────── */
  --breakpoint-mobile:       640px;
  --breakpoint-tablet:       900px;
  --breakpoint-desktop:      1200px;
}