/* ─────────────────────────────────────────────────────────────
   Deep Radio Design System — tokens
   Waarden 1-op-1 uit het handoff-pakket (README §Design Tokens).
   Pas hier aan, nergens anders: de rest van de app gebruikt
   uitsluitend deze variabelen.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Merk — hot magenta */
  --pink-400: #e63d8f;   /* hover */
  --pink-500: #dc1e7a;   /* core  */
  --pink-600: #c2126a;   /* press */

  /* Ink-ramp */
  --ink-950: #08090c;
  --ink-900: #0d0e12;
  --ink-800: #15161b;
  --ink-700: #1e1f26;
  --ink-600: #2a2b34;
  --ink-400: #5c5e6b;
  --ink-300: #7c7e8b;
  --ink-200: #a9abb6;

  /* Vlakken */
  --surface-page:       var(--ink-900);
  --surface-raised:     var(--ink-800);
  --surface-card:       var(--ink-700);
  --surface-card-hover: var(--ink-600);

  /* Tekst */
  --text-primary:   #ffffff;
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-brand:     var(--pink-400);

  /* Randen */
  --border-subtle: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  /* Status */
  --color-brand:   var(--pink-500);
  --color-success: #28c76f;
  --color-danger:  #ff4d4f;
  --color-error:   var(--color-danger);
  --color-warning: #e8b339;

  /* Typografie */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-card: 18px;
  --radius-pill: 999px;

  /* Ruimte — 8px-grid */
  --container:  1200px;
  --gutter:     24px;

  /* Schaduw & glow */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-lg:   0 20px 50px rgba(0, 0, 0, .55);
  --glow-brand:  0 0 0 4px rgba(220, 30, 122, .28);

  /* Beweging */
  --dur-base:      200ms;
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  --blur-bar: saturate(140%) blur(14px);
}