/* Design-Tokens JBG Lab. Einzige Quelle für Farben, Typo und Breakpoints.
   Breakpoints als Kommentar, weil CSS-Custom-Properties in Media Queries
   nicht funktionieren:
     --bp-layout: 840px   Bento einspaltig, Weiche gestapelt
     --bp-prism:  640px   darunter kein WebGL-Prisma */

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --void: #07090E;
  --signal: #E8EDF7;
  --index: #3E9BFF;
  --blocked: #FF4D6D;
  --muted: #6B7A99;
  --glass: rgba(232, 237, 247, 0.06);
  --glass-edge: rgba(232, 237, 247, 0.14);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --radius: 14px;
  --edge: 1px solid var(--glass-edge);
}