/* Lern-App: erzeugt aus design/tokens.json mit scripts/sync-design.js. Nicht von Hand ändern. */
:root, [data-theme="light"] {
  --surface: #f4f7fc;
  --surface-raised: #ffffff;
  --surface-sunken: #e8eef8;
  --line: #d5deeb;
  --line-strong: #7d8ba6;
  --outline: #14213d;
  --ink: #14213d;
  --ink-muted: #56627a;
  --ink-inverse: #ffffff;
  --world: #1769e0;
  --world-ray: #1d70e6;
  --sky: #1565d8;
  --sky-deep: #0d4aa8;
  --sky-soft: #dbe9ff;
  --on-sky: #ffffff;
  --sun: #ffc21a;
  --sun-deep: #d99a00;
  --on-sun: #14213d;
  --leaf: #2ec48f;
  --leaf-deep: #16946a;
  --leaf-soft: #d6f6ea;
  --leaf-text: #0f7a57;
  --on-leaf: #14213d;
  --coral: #ff8a5c;
  --coral-deep: #d9643a;
  --coral-soft: #ffe6dc;
  --coral-text: #b34a1f;
  --on-coral: #14213d;
  --grape: #7445d6;
  --grape-deep: #5530a8;
  --grape-soft: #ece4ff;
  --on-grape: #ffffff;
  --berry: #d42f80;
  --berry-deep: #a01d5e;
  --on-berry: #ffffff;
  --flame: #ff7a1a;
  --frost: #7fd3ff;
  --rarity-common: #9aa7b8;
  --rarity-rare: var(--sky);
  --rarity-epic: var(--grape);
  --rarity-legend: var(--sun);
  --focus: #0d4aa8;
  --skin-1: #ffe0c7;
  --skin-2: #f6c39d;
  --skin-3: #d99a6c;
  --skin-4: #a8693f;
  --skin-5: #6e4227;
  --hair-black: #2a2230;
  --hair-brown: #6b3f22;
  --hair-blond: #f2c14e;
  --hair-red: #d4512a;
  --hair-blue: #3d8bff;
  --hair-pink: #ff7ab8;
  --hair-mint: #5ee0b0;
  --hair-white: #eef2f8;
  --fur-fox: #f2833a;
  --fur-fox-light: #fff1e0;
  --metal: #b9c6da;
  --metal-deep: #8796b0;
  --monster: #e3edf8;
  --horn: #fff1d6;
  --fav-blue: #1565d8;
  --fav-blue-deep: #0d4aa8;
  --fav-green: #2ec48f;
  --fav-green-deep: #16946a;
  --fav-yellow: #ffc21a;
  --fav-yellow-deep: #d99a00;
  --fav-orange: #ff8a5c;
  --fav-orange-deep: #d9643a;
  --fav-pink: #d42f80;
  --fav-pink-deep: #a01d5e;
  --fav-purple: #7445d6;
  --fav-purple-deep: #5530a8;
  --char-pants: #2b3a67;
  --char-shoe: #ffffff;
  --char-cheek: #ff7ab8;
  --coat: #b0794a;
  --coat-deep: #7d5230;
  --dragon: #39b27a;
  --dragon-light: #c9f0c8;
  --yeti-face: #8fb3dd;
  --bomber: #4f6146;
  --bomber-deep: #36452f;
  --maison: #5a3a28;
  --maison-deep: #3b2418;
  --maison-light: #ecd9b0;
  --gold: #f2c230;
  --gold-deep: #b88a12;
  --shadow-card: 0 4px 0 #d5deeb;
  --shadow-pop: 0 10px 24px rgba(20,33,61,0.18);
}
[data-theme="dark"] {
  --surface: #0f1830;
  --surface-raised: #1a2647;
  --surface-sunken: #0a1124;
  --line: #2c3a5c;
  --line-strong: #6b7ca3;
  --outline: #070d1f;
  --ink: #f2f6ff;
  --ink-muted: #a7b4cf;
  --ink-inverse: #ffffff;
  --world: #0d2a66;
  --world-ray: #12357d;
  --sky: #4d9bff;
  --sky-deep: #2f78d9;
  --sky-soft: #1c3566;
  --on-sky: #14213d;
  --sun: #ffc21a;
  --sun-deep: #c78a00;
  --on-sun: #14213d;
  --leaf: #5ee0b0;
  --leaf-deep: #2fb386;
  --leaf-soft: #123d33;
  --leaf-text: #5ee0b0;
  --on-leaf: #14213d;
  --coral: #ff9a70;
  --coral-deep: #d9744a;
  --coral-soft: #40231a;
  --coral-text: #ff9a70;
  --on-coral: #14213d;
  --grape: #c49dff;
  --grape-deep: #9a6fe6;
  --grape-soft: #2c2152;
  --on-grape: #14213d;
  --berry: #ff7ab8;
  --berry-deep: #d9559a;
  --on-berry: #14213d;
  --flame: #ff9447;
  --frost: #7fd3ff;
  --rarity-common: #7d8ba6;
  --rarity-rare: var(--sky);
  --rarity-epic: var(--grape);
  --rarity-legend: var(--sun);
  --focus: #ffd04d;
  --shadow-card: 0 4px 0 #070d1f;
  --shadow-pop: 0 10px 24px rgba(0,0,0,0.45);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --tap-min: 48px;
  --tap-lg: 56px;
  --tap-xl: 72px;
  --stroke-hair: 2px;
  --stroke-bold: 3px;
  --lip: 5px;
  --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-sans: "Nunito", "Avenir Next", system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 44px; line-height: 46px; font-weight: 400; letter-spacing: 0.5px; }
.display-l { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: 0.5px; }
.display-m { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 400; letter-spacing: 0.3px; }
.number { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 400; }
.word { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 900; }
.heading { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 800; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 700; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 800; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 700; }