/* Pixelstation 1 – generiert aus tokens.json. Nicht von Hand ändern. */
:root, [data-theme="light"] {
  --surface-000: #f4f8f9;
  --surface-100: #ffffff;
  --surface-200: #e4eef1;
  --ink: #1b2a33;
  --ink-muted: #4a6170;
  --line: #1b2a33;
  --line-soft: #a3b8c2;
  --primary: #1f7a6c;
  --primary-hover: #19665a;
  --on-primary: #ffffff;
  --secondary: #1f4f8a;
  --on-secondary: #ffffff;
  --correct: #1d5fa6;
  --on-correct: #ffffff;
  --wrong: #b8432f;
  --on-wrong: #ffffff;
  --warning: #f0b43c;
  --on-warning: #1b2a33;
  --focus: #1d5fa6;
  --scrim: rgba(27, 42, 51, 0.72);
  --px-ink: #1b2a33;
  --px-slate-700: #34495a;
  --px-slate-500: #5f7a8a;
  --px-slate-300: #a3b8c2;
  --px-cloud-100: #dde9ed;
  --px-white: #f8fcfc;
  --px-mint-700: #1f7a6c;
  --px-mint-500: #3fb39c;
  --px-mint-300: #93dcc8;
  --px-mint-100: #d4f2ea;
  --px-blue-800: #183d6b;
  --px-blue-600: #2f6db3;
  --px-blue-400: #6fa6e0;
  --px-blue-200: #c2dcf5;
  --px-red-700: #a3302a;
  --px-red-500: #d9574a;
  --px-red-300: #f2a091;
  --px-amber-700: #b57a1e;
  --px-amber-500: #f0b43c;
  --px-amber-300: #f8d987;
  --px-green-700: #3b6e33;
  --px-green-500: #5f9e45;
  --px-green-300: #a6d07a;
  --px-wood-700: #6e4a2e;
  --px-wood-500: #a8784a;
  --px-wood-300: #d6ad7c;
  --px-lilac-700: #5e4f8a;
  --px-lilac-500: #8c7ab8;
  --px-lilac-300: #c9bde6;
  --px-skin-1: #fbe0cc;
  --px-skin-2: #f0c09c;
  --px-skin-3: #d69b6e;
  --px-skin-4: #ad6f45;
  --px-skin-5: #7d4a2b;
  --px-skin-6: #50301c;
  --px-hair-black: #262022;
  --px-hair-brown: #5a3a24;
  --px-hair-blond: #e0bd6e;
  --px-hair-grey: #c3c6ca;
  --px-hair-auburn: #9c4a2a;
  --font-display: "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-hud: Silkscreen, ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-none: 0px;
  --radius-dot: 9999px;
  --shadow-frame: 0 -3px 0 0 #1b2a33, 0 3px 0 0 #1b2a33, -3px 0 0 0 #1b2a33, 3px 0 0 0 #1b2a33, 7px 7px 0 0 #1b2a33;
  --shadow-frame-raised: 0 -3px 0 0 #1b2a33, 0 3px 0 0 #1b2a33, -3px 0 0 0 #1b2a33, 3px 0 0 0 #1b2a33, 5px 5px 0 0 #1b2a33;
  --shadow-frame-flat: 0 -3px 0 0 #1b2a33, 0 3px 0 0 #1b2a33, -3px 0 0 0 #1b2a33, 3px 0 0 0 #1b2a33;
  --pixel-stroke: 3px;
  --pixel-notch: 3px;
  --pixel-scale: 4;
  --pixel-scale-elearn: 2;
  --sprite-grid: 64px;
  --sprite-portrait: 64px;
  --sprite-body-w: 64px;
  --sprite-body-h: 128px;
  --sprite-object-s: 32px;
  --sprite-object-m: 64px;
  --sprite-object-l: 128px;
  --sprite-location-w: 480px;
  --sprite-location-h: 270px;
  --sprite-horizon: 190px;
}

[data-theme="dark"] {
  --surface-000: #121c22;
  --surface-100: #1b2a33;
  --surface-200: #243742;
  --ink: #eaf3f5;
  --ink-muted: #a8bcc6;
  --line: #a8bcc6;
  --line-soft: #3d5566;
  --primary: #4fc4ab;
  --primary-hover: #7ad6c2;
  --on-primary: #0e2420;
  --secondary: #6fa6e0;
  --on-secondary: #0e1c2e;
  --correct: #8dbdf0;
  --on-correct: #0e1c2e;
  --wrong: #f08a6c;
  --on-wrong: #1a0d08;
  --warning: #f0b43c;
  --on-warning: #1b2a33;
  --focus: #f8d987;
  --scrim: rgba(0, 0, 0, 0.72);
  --shadow-frame: 0 -3px 0 0 #a8bcc6, 0 3px 0 0 #a8bcc6, -3px 0 0 0 #a8bcc6, 3px 0 0 0 #a8bcc6, 7px 7px 0 0 #000000;
  --shadow-frame-raised: 0 -3px 0 0 #a8bcc6, 0 3px 0 0 #a8bcc6, -3px 0 0 0 #a8bcc6, 3px 0 0 0 #a8bcc6, 5px 5px 0 0 #000000;
  --shadow-frame-flat: 0 -3px 0 0 #a8bcc6, 0 3px 0 0 #a8bcc6, -3px 0 0 0 #a8bcc6, 3px 0 0 0 #a8bcc6;
}

/* Typostile */
.display-xl { font: 700 56px/60px var(--font-display); }
.display-l { font: 600 40px/44px var(--font-display); }
.title { font: 600 28px/32px var(--font-display); }
.subtitle { font: 500 22px/28px var(--font-display); }
.body-l { font: 400 20px/30px var(--font-body); }
.body { font: 400 17px/26px var(--font-body); }
.body-strong { font: 700 17px/26px var(--font-body); }
.body-s { font: 400 15px/22px var(--font-body); }
.caption { font: 400 13px/18px var(--font-body); }
.hud-l { font: 700 24px/28px var(--font-hud); text-transform: uppercase; }
.hud { font: 400 16px/20px var(--font-hud); text-transform: uppercase; }