/*
 * Design-Tokens von Ike & Pike — die eine Quelle fuer Farben, Schriften und
 * Abstaende aus design/STYLEGUIDE.md. Jede Seite bindet diese Datei im <head>
 * ein (vor allem anderen), die Komponenten liegen in src/ui/base.css.
 *
 * Statisch aus public/ ausgeliefert: so steht die Grundflaeche schon, bevor
 * ein Modul geladen ist — kein Inline-<style>, kein Flash beim Start.
 */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/ui/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/ui/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/ui/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

:root {
  /* Farben (Styleguide §2) */
  --outline: #434a5f;
  --bg-hero: #2b3145;
  --bg-content: #23283a;
  --sep: #363d52;
  --text-1: #e6e9f2;
  --text-2: #a9b1c9;
  --text-3: #8f97b5;
  --muted: #6f7899;
  --accent: #f4b41b;
  --accent-hover: #ffd66b;
  --earth: #cb815e;
  --earth-dark: #9f5a52;
  --earth-light: #f4ac66;
  --grass: #2eb082;
  --grass-top: #36e377;
  --water: #2cc5f6;
  --water-deep: #1490c3;
  --snow: #dff6f5;
  --ike: #5ad28c;
  --pike: #f4b41b;
  /* Zustandsfarben (Fehler/Hinweis/OK) — nur fuer Meldungen, nicht fuer Flaechen. */
  --danger: #ff8a9a;
  --danger-bg: #4a2430;
  --danger-line: #8d3c4d;
  --warn: #f0c87a;
  --ok: #6ad06a;

  /* Schrift (Styleguide §3.2) */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --text-body: 15px;
  --leading-body: 1.7;
  --text-small: 12px;
  --tracking-label: 0.14em;

  /* Raster (Styleguide §1): 2-px-Kontur, Abstaende in Vielfachen von 4 px */
  --line: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --measure: 680px;
}

/* Grundflaeche jeder Seite: dunkler Inhaltsgrund, sekundaerer Text, Mono. */
html {
  background: var(--bg-content);
  color: var(--text-2);
  font-family: var(--font-mono);
}
