/* Drachenheld Frontend – Design-Tokens (eine Quelle für alle Frontend-Werkzeuge).
   Regeln: Komponenten nutzen nur die semantischen Tokens (--dh-bg, --dh-text, …),
   nie die Rohfarben direkt. Gold ist Akzent, nie Textfarbe auf Hell. */
:root{
  /* Rohfarben */
  --dh-wine-900:#3a0b0d; --dh-wine-800:#4d0e11; --dh-wine-700:#6a1417; --dh-wine-600:#84191d;
  --dh-wine-100:#f4e4e4; --dh-wine-50:#fbf3f3;
  --dh-gold-700:#7d5f24; --dh-gold-600:#b08a45; --dh-gold-500:#c9a35c; --dh-gold-300:#dbb877;
  --dh-gold-100:#f6eedd; --dh-gold-50:#fbf7ee;
  --dh-cream-50:#faf7f1; --dh-cream-100:#f7f4ee; --dh-cream-200:#efe9df; --dh-cream-300:#e4dccd;
  --dh-ink-900:#1d1816; --dh-ink-800:#2b2421; --dh-ink-700:#433a35; --dh-ink-600:#5c534d;
  --dh-ink-500:#6b625c; --dh-ink-400:#958c85; --dh-ink-300:#bdb5ae; --dh-ink-200:#ddd6ce; --dh-ink-100:#ece6de;
  --dh-white:#ffffff;

  /* Semantik */
  --dh-bg:var(--dh-cream-50);
  --dh-page-bg:#fff;             /* Hintergrund der Theme-Seite (klebende Kopfzeilen); Themes mit Creme-Seite: überschreiben */
  --dh-text-out:#766d67;         /* gedämpft, aber AA auf Weiß (5,06:1) – z. B. Tage außerhalb des Monats */
  --dh-surface:var(--dh-white);
  --dh-surface-2:var(--dh-cream-100);
  --dh-surface-3:var(--dh-cream-200);
  --dh-text:var(--dh-ink-900);
  --dh-text-2:var(--dh-ink-700);
  --dh-text-muted:var(--dh-ink-500);
  --dh-border:var(--dh-ink-200);
  --dh-border-strong:var(--dh-ink-300);
  --dh-accent:var(--dh-wine-700);
  --dh-accent-hover:var(--dh-wine-800);
  --dh-accent-press:var(--dh-wine-900);
  --dh-accent-soft:var(--dh-wine-50);
  --dh-on-accent:var(--dh-white);
  --dh-highlight:var(--dh-gold-500);
  --dh-highlight-soft:var(--dh-gold-100);
  --dh-success:#1f7a4d; --dh-success-soft:#e7f3ec;
  --dh-warning:#8f5500; --dh-warning-soft:#fbf0dd;
  --dh-danger:#b3261e;  --dh-danger-soft:#fbe9e7;
  --dh-info:#1d5f8a;    --dh-info-soft:#e6f0f7;
  --dh-backdrop:rgba(29,24,22,.42);
  --dh-focus-ring:0 0 0 3px rgba(201,163,92,.6);
  --dh-focus-outline:2px solid var(--dh-wine-700);

  /* Schrift */
  --dh-font-display:"Cinzel","DH Cinzel",Georgia,"Times New Roman",serif;
  --dh-font-body:"Source Sans 3","DH Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dh-text-xs:.8125rem; --dh-text-sm:.9375rem; --dh-text-base:1rem; --dh-text-lg:1.125rem;
  --dh-text-xl:1.375rem; --dh-text-2xl:1.75rem; --dh-text-3xl:2.125rem;
  --dh-leading-tight:1.2; --dh-leading:1.5;

  /* Raster */
  --dh-space-1:4px; --dh-space-2:8px; --dh-space-3:12px; --dh-space-4:16px; --dh-space-5:20px;
  --dh-space-6:24px; --dh-space-8:32px; --dh-space-10:40px; --dh-space-12:48px;
  --dh-radius-sm:8px; --dh-radius:12px; --dh-radius-lg:16px; --dh-radius-xl:22px; --dh-radius-pill:999px;
  --dh-hit:44px;

  /* Tiefe und Bewegung */
  --dh-shadow-1:0 1px 2px rgba(29,24,22,.06),0 1px 1px rgba(29,24,22,.04);
  --dh-shadow-2:0 8px 24px rgba(29,24,22,.10),0 2px 6px rgba(29,24,22,.06);
  --dh-shadow-3:0 24px 64px rgba(29,24,22,.24),0 4px 12px rgba(29,24,22,.10);
  --dh-ease:cubic-bezier(.2,.8,.2,1);
  --dh-ease-out:cubic-bezier(.16,1,.3,1);
  --dh-dur-1:120ms; --dh-dur-2:220ms; --dh-dur-3:320ms;

  /* Ebenen: über Theme-Headern und Cookie-Bannern, unter Browser-UI */
  --dh-z-sheet:2147480000; --dh-z-toast:2147480010;
}
@media (prefers-reduced-motion:reduce){
  :root{--dh-dur-1:0ms;--dh-dur-2:0ms;--dh-dur-3:0ms}
}