/* Digital Jukebox — design tokens (zie brief §2) */

:root {
  /* Merk — blauw uit het logobestand (DJ logo Blue.svg) */
  --dj-blue:          #0080FF;   /* logo, actieve nav, CTA, links, labels */
  --dj-blue-hover:    #0070E0;
  --dj-blue-pressed:  #005FC0;
  --dj-blue-glow:     rgba(0, 128, 255, 0.55);

  /* Neutralen (afgestemd op de warme, kleurloze render) */
  --dj-ink:           #1E1E1E;   /* tagline, koppen */
  --dj-text:          #3A3A3A;   /* bodytekst, nav-items */
  --dj-text-muted:    #6B6862;
  --dj-surface:       #F6F4F1;   /* nav-pil, panelen */
  --dj-surface-glass: rgba(248, 246, 243, 0.82);
  --dj-scene-bg:      #E6E0D9;   /* fallback achter de render */
  --dj-toggle-track:  #7A7773;   /* segmented control achtergrond */
  --dj-white:         #FFFFFF;

  /* Overlay bij zoom */
  --dj-dim:           rgba(230, 224, 217, 0.55);

  /* Fonts (via Google Fonts) */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label:   "Bebas Neue", "Arial Narrow", Impact, sans-serif;

  /* Typografie */
  --fs-tagline:  clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem); /* iets kleiner dan de brief (feedback) */
  --fs-label:    clamp(2rem, 1.4rem + 2vw, 3rem);     /* modelnaam */
  --fs-nav:      0.9375rem;  /* compacter dan de brief (feedback) */
  --fs-link:     1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --lh-tight: 1.1;  --lh-body: 1.5;

  /* Vorm & ruimte */
  --radius-pill: 999px;
  --radius-lg:   24px;
  --radius-md:   14px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: var(--space-4);

  /* Schaduw */
  --shadow-pill: 0 6px 24px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-cta:  0 8px 24px rgba(0,128,255,0.30);

  /* Gloed rond toestellen: via CSS filter op transparante PNG, niet ingebakken.
     Alleen op de witte/grijze varianten. */
  --glow-idle:   drop-shadow(0 0 10px var(--dj-blue-glow)) drop-shadow(0 0 22px var(--dj-blue-glow));
  /* Ademende gloed: opacity min → 1. Brief zegt 0.75; dieper voor een zichtbaar effect (feedback) */
  --glow-breathe-min: 0.3;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out: labels, panelen */
  --ease-camera: cubic-bezier(0.65, 0, 0.35, 1);    /* in-out: camerabewegingen */
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-camera: 750ms;
  --dur-camera-out: 550ms;
  --dur-pan:    650ms;
  --stagger:    60ms;

  /* Nav + header (logo lijnt uit op de nav-hoogte) */
  --nav-ball: 48px;
  --nav-h: var(--nav-ball);
  --page-top: var(--space-4);

  /* Tweede, subtiel accent: warm bruin (notities, badges, TODO) */
  --dj-amber: #B26A00;
  --dj-amber-soft: rgba(178, 106, 0, 0.12);
}

@media (min-width: 900px) {
  :root {
    --gutter: var(--space-6);
    --nav-ball: 44px;
    --nav-h: calc(var(--nav-ball) + 8px); /* bol + 4px pil-padding boven en onder */
    --page-top: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-med: 200ms;
  }
}