/* GENERATED FILE - DO NOT EDIT. Source: assets/css/src; Build: php tools/build_css.php */
@layer reset, tokens, base, layout, components, screens, states, theme, overrides;

/* SOURCE: 80-themes/themes.css */
/* =========================================================
   THEME: Seasonal themes
   Scope: Global
   Selectors: [data-theme]
   ========================================================= */

@layer theme {
[data-theme="christmas"] {
  --surface-page: #f5f1e8;
  --surface-page-accent: #dbe9df;
  --surface-panel: rgba(255, 253, 246, 0.92);
  --surface-panel-strong: rgba(255, 253, 246, 0.97);
  --surface-control: rgba(255, 253, 246, 0.86);
  --surface-card-muted: rgba(255, 253, 246, 0.76);
  --surface-card: #fffdf6;
  --surface-subtle: #edf5ee;
  --text-primary: #18392e;
  --text-secondary: #50665c;
  --accent-primary: #17634a;
  --accent-secondary: #a52e3f;
  --accent-soft: #dceee4;
  --surface-glow-warm: rgba(255, 242, 196, 0.62);
  --surface-glow-pink: rgba(177, 42, 58, 0.16);
  --theme-page-image: radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.38) 0 2px, transparent 2.5px);
  --theme-page-size: 24px 24px;
  --border-card: rgba(23, 99, 74, 0.25);
  --border-panel: rgba(165, 46, 63, 0.24);
  --shadow-card: 0 18px 55px rgba(38, 72, 55, 0.18);
}

[data-theme="winter"] {
  --surface-page: #eef7ff;
  --surface-page-accent: #dbeeff;
  --surface-panel: rgba(249, 253, 255, 0.9);
  --surface-panel-strong: rgba(249, 253, 255, 0.97);
  --surface-control: rgba(249, 253, 255, 0.84);
  --surface-card-muted: rgba(249, 253, 255, 0.74);
  --surface-card: #ffffff;
  --surface-subtle: #e3f3ff;
  --text-primary: #193653;
  --text-secondary: #526d87;
  --accent-primary: #3479ad;
  --accent-secondary: #7e68b2;
  --accent-soft: #d8efff;
  --surface-glow-warm: rgba(231, 249, 255, 0.72);
  --surface-glow-pink: rgba(174, 220, 255, 0.5);
  --theme-page-image: radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.48) 0 1.5px, transparent 2px);
  --theme-page-size: 32px 32px;
  --border-card: rgba(52, 121, 173, 0.24);
  --border-panel: rgba(126, 104, 178, 0.22);
  --shadow-card: 0 18px 55px rgba(52, 103, 144, 0.17);
}

[data-theme="halloween"] {
  color-scheme: dark;
  --surface-page: #17131d;
  --surface-page-accent: #2b1a31;
  --surface-panel: rgba(37, 29, 45, 0.94);
  --surface-panel-strong: rgba(45, 36, 53, 0.98);
  --surface-control: rgba(57, 42, 66, 0.9);
  --surface-card-muted: rgba(57, 42, 66, 0.8);
  --surface-card: #2d2435;
  --surface-subtle: #392a42;
  --surface-inverse: #fff5e8;
  --text-primary: #fff5e8;
  --text-secondary: #d9c9db;
  --text-muted: #b6a5ba;
  --accent-primary: #ef8f2f;
  --accent-secondary: #a978d1;
  --accent-soft: #4a304f;
  --surface-glow-warm: rgba(239, 143, 47, 0.17);
  --surface-glow-pink: rgba(169, 120, 209, 0.17);
  --theme-page-image: radial-gradient(circle at 18px 18px, rgba(239, 143, 47, 0.12) 0 2px, transparent 2.5px);
  --theme-page-size: 36px 36px;
  --border-card: rgba(239, 143, 47, 0.3);
  --border-panel: rgba(169, 120, 209, 0.3);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.34);
}

/* Gezielte Theme-Abweichung: saisonaler Rand ohne Screen-Kopie. */
[data-theme="christmas"] :where(.c-card, .panel, .status-card),
[data-theme="winter"] :where(.c-card, .panel, .status-card),
[data-theme="halloween"] :where(.c-card, .panel, .status-card) {
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

/* Der Reader besitzt absichtlich eine dunkle Buchpalette; Themes ersetzen sie hier zentral. */
[data-theme="christmas"] .p-reader {
  --page-bg: #17251f;
  --panel-bg: rgba(31, 52, 42, 0.9);
  --panel-border: rgba(228, 205, 156, 0.24);
  --text: #fff8e9;
  --muted: #d9cdb5;
  --accent: #c74250;
}

[data-theme="winter"] .p-reader {
  --page-bg: #102333;
  --panel-bg: rgba(21, 48, 68, 0.9);
  --panel-border: rgba(185, 224, 248, 0.25);
  --text: #f2faff;
  --muted: #bed3e1;
  --accent: #72b6df;
}

[data-theme="halloween"] .p-reader {
  --page-bg: #120f17;
  --panel-bg: rgba(36, 27, 43, 0.92);
  --panel-border: rgba(239, 143, 47, 0.26);
  --text: #fff3df;
  --muted: #cebcd1;
  --accent: #ef8f2f;
}

/* Öffentliche Kapitel verwenden historische lokale Variablen; der Theme-Layer darf sie zentral ersetzen. */
[data-theme="christmas"] .p-public-story {
  --ink: #18392e;
  --muted: #597066;
  --page: #f5f1e8;
  --paper: rgba(255, 253, 246, 0.92);
  --navy: #18392e;
  --blue: #17634a;
  --cyan: #8fc5aa;
  --pink: #c74250;
  --gold: #d4b66d;
  --line: rgba(23, 99, 74, 0.22);
  --shadow: 0 24px 70px rgba(38, 72, 55, 0.16);
}

[data-theme="winter"] .p-public-story {
  --ink: #193653;
  --muted: #58748c;
  --page: #eef7ff;
  --paper: rgba(249, 253, 255, 0.92);
  --navy: #193653;
  --blue: #3479ad;
  --cyan: #78c8eb;
  --pink: #9abde1;
  --gold: #bda969;
  --line: rgba(52, 121, 173, 0.2);
  --shadow: 0 24px 70px rgba(52, 103, 144, 0.15);
}

[data-theme="halloween"] .p-public-story {
  --ink: #fff5e8;
  --muted: #d9c9db;
  --page: #17131d;
  --paper: rgba(45, 36, 53, 0.94);
  --navy: #fff5e8;
  --blue: #ef8f2f;
  --cyan: #c691e8;
  --pink: #bd6c8f;
  --gold: #efbd64;
  --line: rgba(239, 143, 47, 0.25);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

[data-theme]:not([data-theme="default"]) body.p-public-story,
[data-theme]:not([data-theme="default"]) body.p-home {
  background-color: var(--surface-page);
  background-image:
    var(--theme-page-image),
    radial-gradient(circle at top right, var(--surface-glow-warm), transparent 28%),
    radial-gradient(circle at top left, var(--surface-glow-pink), transparent 30%),
    linear-gradient(180deg, var(--surface-page-accent) 0%, var(--surface-page) 78%);
  background-size: var(--theme-page-size), auto, auto, auto;
}

/* Beispiel für ausgewählte Screen-Abweichung ohne Kopie des Classroom-CSS. */
[data-theme="christmas"] .p-classroom .game-classroom-shell {
  --classroom-red: #d85a68;
  --classroom-gold: #e2bf74;
  --classroom-blue: #8cc7ad;
  --classroom-green: #78c697;
}
}