/* D&D Tech — design tokens. Eén bron van waarheid voor kleur, type en ruimte. */
:root {
  /* Kleur */
  --bg: #04060c;            /* bijna-zwart, blauwe ondertoon */
  --bg-2: #080c17;          /* sectie-afwisseling */
  --surface: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.06);
  --line: rgba(140,170,255,0.14);
  --line-strong: rgba(140,170,255,0.28);
  --text: #e9eefc;
  --text-dim: #9aa6c4;
  --text-mute: #7d89a8;     /* min. 4,5:1 op --bg en --bg-2 (WCAG AA) */
  --cyan: #00e0ff;          /* primair accent */
  --violet: #7b5cff;        /* secundair accent */
  --lime: #b6ff3b;          /* status "online" */
  --danger: #ff4d6d;
  --grad: linear-gradient(120deg, var(--cyan), var(--violet));
  --glow-cyan: 0 0 24px rgba(0,224,255,.35), 0 0 64px rgba(0,224,255,.15);
  --glow-violet: 0 0 24px rgba(123,92,255,.35), 0 0 64px rgba(123,92,255,.15);

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: .78rem; --fs-sm: .9rem; --fs-md: 1rem; --fs-lg: 1.2rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  --fs-2xl: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --fs-hero: clamp(2.6rem, 1.4rem + 5.5vw, 5.6rem);

  /* Ruimte & vorm */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 5rem; --space-9: 8rem;
  --radius: 14px; --radius-sm: 8px; --radius-lg: 22px;
  --container: 1240px;
  --header-h: 72px;
  --ease: cubic-bezier(.2,.7,.2,1);
}