/* ================================================================
   THEME: Theater (Default)
   Warm, theatralisch — Buehne, Holz, Feuer
   Drachen-Rot, Buehnen-Anthrazit, Buehnen-Gold, Creme
   ================================================================ */

:root {
  /* Hintergruende */
  --bg-base:           #FAF7F2;   /* Creme — Standard-Body */
  --bg-alt:            #F2EBE0;   /* Buehnenholz — alternierende Sektionen */
  --bg-dark:           #1A1A1A;   /* Buehne — Konzept, Skepsis */
  --bg-card:           #FAF7F2;   /* Karten-Hintergrund */

  /* Text */
  --text-base:         #2C2C2C;   /* Anthrazit — Fliesstext */
  --text-headline:     #1A1A1A;   /* Buehne — Headlines */
  --text-muted:        #6B6B6B;   /* gedaempft */
  --text-on-dark:      #FAF7F2;   /* Creme auf dunklem Hintergrund */
  --text-link:         #C0392B;   /* Drachen-Rot — Links */

  /* Akzente */
  --accent:            #C0392B;   /* Drachen-Rot — Primaerakzent */
  --accent-hover:      #962d22;
  --accent-soft:       #D4A24C;   /* Buehnen-Gold — Sekundaerakzent */
  --accent-soft-hover: #b88838;

  /* Struktur */
  --border:            #d9d2c4;   /* feine Trennlinien */
  --shadow:            rgba(26, 26, 26, 0.08);
  --shadow-strong:     rgba(26, 26, 26, 0.16);

  /* Typografie */
  --font-headline: Georgia, "Crimson Pro", "EB Garamond", "Lora", serif;
  --font-body:     system-ui, -apple-system, "Segoe UI", "Inter", "Source Sans 3", "DM Sans", sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Headline-Charakter */
  --headline-weight:        600;
  --headline-letter-spacing: -0.01em;
  --headline-text-transform: none;

  /* Hero-Untertitel-Charakter */
  --subtitle-style:        italic;
  --subtitle-letter-spacing: 0.05em;

  /* Body-Charakter */
  --body-line-height:      1.6;

  /* Buttons */
  --btn-radius:            6px;
  --btn-border-width:      2px;
  --btn-text-transform:    none;
  --btn-font-weight:       600;

  /* Karten */
  --card-radius:           12px;
  --card-border:           none;
  --card-shadow:           0 2px 8px var(--shadow);

  /* Theme-Name (fuer JS) */
  --theme-name: "theater";
}