/* Design tokens — single source of truth for the look & feel.
   Editorial-technical system: serif display (Fraunces) + technical sans/mono
   (IBM Plex). Calm, credible, age-appropriate for upper secondary (Kl. 11/12).
   Fonts are self-hosted (no Google CDN) for GDPR compliance in a German school. */

/* ---- Self-hosted webfonts (woff2, latin subset) ---- */
@font-face {
  font-family: "Fraunces"; src: url("/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces"; src: url("/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces"; src: url("/fonts/fraunces-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans"; src: url("/fonts/plexsans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans"; src: url("/fonts/plexsans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans"; src: url("/fonts/plexsans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans"; src: url("/fonts/plexsans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono"; src: url("/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono"; src: url("/fonts/plexmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Retro pixel display faces (SIL Open Font License) — self-hosted, GDPR-safe.
   Silkscreen: readable pixel face for titles/chrome (default).
   Press Start 2P: chunky 8-bit face, ~1em per glyph — only for very short labels. */
@font-face {
  font-family: "Silkscreen"; src: url("/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Silkscreen"; src: url("/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Press Start 2P"; src: url("/fonts/pressstart2p-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Pixel faces for retro chrome; readable sans stays for body & headings. */
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-8bit: "Press Start 2P", "Silkscreen", monospace;
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 72px;

  /* Chunky retro cards: rounded, not sharp. */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --maxw: 1080px;
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Farben: neutrale VS-Code-Grautöne (Dark Modern) — das einzige Theme.
   Der helle Modus wurde bewusst entfernt; die App läuft ausschließlich dunkel. ---- */
:root {
  /* Neutrale VS-Code-Grautöne (Dark Modern) — kein Blaustich. */
  --bg: #1f1f1f;
  --surface: #252526;
  --surface-2: #333333;
  --border: #3c3c3c;
  --border-strong: #4d4d4d;
  --text: #cccccc;
  --text-muted: #9d9d9d;
  --primary: #facc15;
  --primary-hover: #fde047;
  --primary-dark: #ca8a04;
  --primary-weak: #3a2f08;
  --primary-contrast: #1f1f1f;
  --grad-a: #eab308;
  --grad-b: #f59e0b;
  --grad: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  --on-grad: #1f1f1f;
  --accent: #facc15;
  --coin: #facc15;
  --success: #89d185;
  --success-weak: #1e2b1e;
  --danger: #f14c4c;
  --danger-weak: #2d1c1c;
  --warning: #cca700;
  --warning-weak: #2e2a12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(250, 204, 21, 0.35);
  --grid-line: rgba(255, 255, 255, 0.035);

  /* Editor syntax highlighting — VS Code "Dark+" palette. */
  --tok-kw: #569cd6;
  --tok-kwc: #c586c0;
  --tok-str: #ce9178;
  --tok-num: #b5cea8;
  --tok-com: #6a9955;
  --tok-fn: #dcdcaa;
  --tok-type: #4ec9b0;
  --tok-self: #9cdcfe;
  --tok-const: #569cd6;
  --tok-dec: #dcdcaa;
  --editor-sel: rgba(87, 189, 122, 0.28); /* translucent so the colour layer shows through */
}