/* ════════════════════════════════════════════════════════════════
   MARSTALLER-UNIVERSUM — Design Tokens v1.0 (5.4.7)
   ────────────────────────────────────────────────────────────────
   EINZIGE QUELLE für alle Design-Werte im System.
   Alle anderen CSS-Dateien referenzieren nur diese Variablen.
   Goldfarbe ändern: eine Stelle. Timing ändern: eine Stelle.
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── Farben ─────────────────────────────────────────────────── */
  --mup-gold:          #c9a84c;
  --mup-gold-deep:     #a08530;
  --mup-gold-soft:     rgba(201, 168, 76, 0.18);
  --mup-gold-glow:     rgba(201, 168, 76, 0.45);

  --mup-ink:           #1f1a12;
  --mup-ink-soft:      #5c5145;
  --mup-ink-mute:      #8c7b68;

  --mup-cream:         #f8f2e6;
  --mup-cream-deep:    #f0e6d0;
  --mup-cream-paper:   #ede5d4;

  --mup-glass-bg:      rgba(255, 255, 255, 0.10);
  --mup-glass-border:  rgba(255, 255, 255, 0.22);
  --mup-glass-blur:    18px;

  /* ── Timing — Basis 200ms, Multiplikatoren ×1 ×2 ×3.5 ─────── */
  --mup-t-instant:     100ms;
  --mup-t-fast:        200ms;
  --mup-t-mid:         400ms;
  --mup-t-slow:        700ms;
  --mup-t-enter:       900ms;   /* Seiten-Eingang, Karten-Fade */

  /* ── Easing — ein System ────────────────────────────────────── */
  --mup-ease:          cubic-bezier(0.22, 1, 0.36, 1);   /* Ease-Out-Spring: schnell rein, sanft aus */
  --mup-ease-in:       cubic-bezier(0.4,  0, 1, 1);      /* Elemente die weggehen */
  --mup-ease-hover:    ease;                              /* Hover-Micro-Interactions */

  /* ── Spacing — 8px Basis ────────────────────────────────────── */
  --mup-sp-1:   0.5rem;    /*  8px */
  --mup-sp-2:   1rem;      /* 16px */
  --mup-sp-3:   1.5rem;    /* 24px */
  --mup-sp-4:   2rem;      /* 32px */
  --mup-sp-6:   3rem;      /* 48px */
  --mup-sp-8:   4rem;      /* 64px */
  --mup-sp-12:  6rem;      /* 96px */
  --mup-sp-16:  8rem;      /* 128px */

  /* ── Border-Radius ──────────────────────────────────────────── */
  --mup-r-s:    4px;
  --mup-r-m:    8px;
  --mup-r-l:    14px;
  --mup-r-xl:   18px;
  --mup-r-pill: 60px;

  /* ── Schatten ───────────────────────────────────────────────── */
  --mup-shadow-s:   0 4px 12px -4px rgba(31, 26, 18, 0.25);
  --mup-shadow-m:   0 12px 36px -12px rgba(31, 26, 18, 0.30);
  --mup-shadow-l:   0 24px 60px -20px rgba(31, 26, 18, 0.40);
  --mup-shadow-xl:  0 40px 100px -30px rgba(31, 26, 18, 0.55);
  --mup-shadow-glow: 0 8px 20px -8px rgba(201, 168, 76, 0.50);

  /* ── Typografie ─────────────────────────────────────────────── */
  --mup-font-serif:  'EB Garamond', Georgia, serif;
  --mup-font-sans:   'Jost', 'Helvetica Neue', sans-serif;

  /* ── Z-Index Skala ──────────────────────────────────────────── */
  --mup-z-base:    1;
  --mup-z-card:    2;
  --mup-z-overlay: 10;
  --mup-z-sticky:  9000;
  --mup-z-header:  9990;
  --mup-z-lb:      99999;

  /* ── Breakpoints als Custom Props (JS-Zugriff via getComputedStyle) */
  --mup-bp-mobile:  640px;
  --mup-bp-tablet:  1024px;
}

/* ── Dark Mode Token-Overrides ──────────────────────────────────
   Alle anderen CSS-Dateien müssen nicht geändert werden —
   sie greifen automatisch auf die überschriebenen Tokens zurück.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --mup-cream:        #1a1612;
    --mup-cream-deep:   #221d15;
    --mup-cream-paper:  #1e1912;

    --mup-ink:          #f0e8d8;
    --mup-ink-soft:     #c8b89a;
    --mup-ink-mute:     #8c7b68;

    --mup-glass-bg:     rgba(20, 17, 10, 0.65);
    --mup-glass-border: rgba(255, 255, 255, 0.12);

    --mup-shadow-s:   0 4px 12px -4px rgba(0, 0, 0, 0.50);
    --mup-shadow-m:   0 12px 36px -12px rgba(0, 0, 0, 0.55);
    --mup-shadow-l:   0 24px 60px -20px rgba(0, 0, 0, 0.65);
    --mup-shadow-xl:  0 40px 100px -30px rgba(0, 0, 0, 0.75);
  }
}

/* ── Reduzierte Bewegung: Timing-Tokens auf Minimum ────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mup-t-instant: 1ms;
    --mup-t-fast:    1ms;
    --mup-t-mid:     1ms;
    --mup-t-slow:    1ms;
    --mup-t-enter:   1ms;
    --mup-ease:      linear;
    --mup-ease-in:   linear;
  }
}