/* Diados Design System — gemeinsame CSS Custom Properties.
 *
 * Wird in jeder App unter /design/diados.css eingebunden und legt die
 * Brand-Tokens als CSS-Vars fest. Apps verwenden die Vars direkt in
 * Custom-CSS oder über die erweiterte Tailwind-Config (siehe
 * tailwind-config.js).
 */
:root {
  /* Markenfarben */
  --ink:        hsl(25 20% 12%);
  --parchment:  hsl(42 30% 93%);
  --parchment-dark: hsl(42 30% 88%);
  --cream:      hsl(40 25% 88%);
  --warm-gray:  hsl(25 12% 45%);
  --warm-gray-light: hsl(25 10% 65%);
  --warm-gray-dark:  hsl(25 14% 30%);

  /* Akzentfarben */
  --accent:       hsl(30 50% 42%);
  --accent-light: hsl(30 45% 52%);
  --accent-dark:  hsl(30 55% 30%);

  /* Zusätzliche Brand */
  --sage:      hsl(100 12% 49%);
  --deep-navy: hsl(220 18% 21%);
  --soft-rust: hsl(20 42% 54%);

  /* Semantik-Farben — eigene Spur, nicht Brand,
     weil Recognition wichtiger ist als Konsistenz. */
  --success: hsl(145 38% 38%);
  --warning: hsl(35 85% 45%);
  --danger:  hsl(0 65% 45%);
  --info:    hsl(210 50% 45%);

  /* Typographie */
  --font-serif:   "Playfair Display", Georgia, serif;
  --font-sans:    "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;

  /* UI-Rollen (semantisch) */
  --color-bg-page:       var(--parchment);
  --color-bg-surface:    #ffffff;
  --color-text:          var(--ink);
  --color-text-muted:    var(--warm-gray);
  --color-primary:       var(--accent);
  --color-primary-hover: var(--accent-dark);
  --color-border:        var(--parchment-dark);
}

/* Körper-Defaults — Apps können dies per Body-Klasse opt-out-en falls
 * eine Seite bewusst den Parchment-Look umgehen muss. */
body.diados-theme {
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* Editorial-Klasse für Seiten-Titel, Empty-States, Zitate.
 * Bewusst nur auf opt-in — Data-UI bleibt Sans. */
.diados-serif  { font-family: var(--font-serif); letter-spacing: -0.01em; }
.diados-italic { font-family: var(--font-display); font-style: italic; }