/* Design-Tokens — Referenz: design/foundations.html */

/* Wortmarke: echter Arcade-Pixelfont. Headlines: kantiger Display-Font.
   Beide selbst gehostet (SIL Open Font License), kein externer CDN-Call. */
@font-face {
  font-family: "Arcade";
  src: url("/assets/press-start-2p-7b91d7fe.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Display";
  src: url("/assets/chakra-petch-bold-italic-9fec7713.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

* { margin: 0; box-sizing: border-box; }

:root {
  --bg: #0b0e1a;
  --surface: #141a2e;
  --card: #1b2340;
  --line: #2a3355;
  --cyan: #22d3ee;
  --magenta: #e879f9;
  --pink: #f472b6;
  --lime: #a3e635;
  --amber: #fbbf24;
  --red: #fb7185;
  --text: #e2e8f0;
  --muted: #8b94b3;
}

body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(30, 27, 75, .45), transparent), var(--bg);
  color: var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.display {
  font-family: "Display", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Wortmarke im Pixelfont — bewusst kleiner gesetzt, da Pixelfonts
   optisch größer wirken und viel Breite brauchen. */
.logo {
  font-family: "Arcade", ui-monospace, monospace;
  font-size: 15px;
  font-style: normal;
  letter-spacing: .02em;
  line-height: 1.4;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Icons & Pixel-Sprites */
.icon { flex: none; vertical-align: -.15em; }
.sprite { flex: none; display: block; }
.icon-row { display: inline-flex; align-items: center; gap: 8px; }

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 14px 26px;
  font: 900 15px/1 ui-sans-serif, system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: italic;
  color: #0b0e1a;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 20px rgba(34, 211, 238, .4);
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--line);
  box-shadow: none;
  text-decoration: none;
}

.notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--card);
  border: 1px solid var(--lime);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  color: var(--lime);
  box-shadow: 0 0 20px rgba(163, 230, 53, .25);
}