/* ═══════════════════════════════════════════════════════════════
   HAUT RITUALE — Design Tokens
   Zentrale Variablen für die gesamte Website.
   Änderungen hier wirken sich auf alle Seiten aus.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Farben: Primärpalette ──────────────────────────────── */
  --color-accent:            #a07878;     /* Altrosa (Hauptakzent) */
  --color-accent-dark:       #8a6565;     /* Hover / aktiv */
  --color-accent-light:      #c9a8a8;     /* Dezent */
  --color-accent-soft:       #f4ebeb;     /* Hintergrund zart */
  --color-accent-lighter:    #faf5f5;     /* Page-Background Streifen */

  /* ── Farben: Neutral ────────────────────────────────────── */
  --color-ink:               #2a2323;     /* Haupttext */
  --color-ink-soft:          #5a4f4f;     /* Sekundärtext */
  --color-ink-muted:         #8a8080;     /* Tertiärtext / Meta */
  --color-line:              #e8dede;     /* Trennlinien */
  --color-line-soft:         #f2ebeb;     /* Weiche Trennlinien */
  --color-bg:                #fbf9f7;     /* Seiten-Hintergrund */
  --color-bg-warm:           #f5efea;     /* Sektion warm */
  --color-white:             #ffffff;

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

  /* ── Typografie ─────────────────────────────────────────── */
  --font-display:            'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:               '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:               4px;
  --radius-md:                8px;
  --radius-lg:                16px;
  --radius-xl:                24px;
  --radius-pill:              999px;

  /* ── Schatten ───────────────────────────────────────────── */
  --shadow-soft:             0 2px 12px rgba(42, 35, 35, 0.06);
  --shadow-medium:           0 8px 32px rgba(42, 35, 35, 0.08);
  --shadow-strong:           0 16px 48px rgba(42, 35, 35, 0.12);
  --shadow-inset:            inset 0 1px 3px rgba(42, 35, 35, 0.04);

  /* ── Übergänge ──────────────────────────────────────────── */
  --transition-fast:         150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:         300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:         600ms cubic-bezier(0.4, 0, 0.2, 1);

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

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