/* JazzAmstelveen.nl design tokens — prototype v1
   Concept: "Het Podium in de Pagina" met affiche-typografie (designbesluit 24-09-2026)
   De pagina is dag, het podium is avond. Eén verzadigd lamplicht-vlak. */

:root {
  /* Kleur */
  --canvas: #F4F1EA;        /* gebroken wit / kalk, niet geel-crème */
  --surface: #FBF9F4;       /* cards en formulieren op canvas */
  --ink: #1E1913;           /* primaire tekst */
  --muted: #6B6257;         /* secundaire tekst, AA op canvas */
  --stage: #221A12;         /* podiumvlak, espresso, geen puur zwart */
  --stage-soft: #2C2318;    /* iets lichter vlak binnen stage */
  --stage-ink: #F2E8D8;     /* tekst op stage */
  --stage-muted: #B1A38C;   /* secundaire tekst op stage */
  --accent: #C8451F;        /* lamplicht: steenrood, knoppen, actieve filters, signaalvlakken */
  --accent-deep: #A03212;   /* hover en donkere rand van accent */
  --accent-ink: #FFF6EC;    /* tekst op accent, contrast 4.9:1 */
  --accent-text: #9C3110;   /* accent als tekstkleur op canvas, AA */
  --hairline: #DCD5C8;      /* lijnen en randen op canvas */
  --hairline-stage: #4A3D2C;/* lijnen op stage */
  --focus: #1E1913;         /* focusring */

  /* Typografie */
  --font-display: "Big Shoulders Display", "Big Shoulders", sans-serif; /* affiche: hero, datums, artiestnamen */
  --font-sans: "Instrument Sans", sans-serif;   /* tekst en UI */
  --font-mono: "IBM Plex Mono", monospace;      /* tijden, prijzen, labels */
  --font-wordmark-serif: "Fraunces", serif;     /* alleen het cursieve 'Jazz' in het woordmerk */

  --display-xl: clamp(3.25rem, 11vw, 7.5rem);   /* hero */
  --display-l: clamp(2.25rem, 5.5vw, 4rem);     /* paginatitels, uitgelicht */
  --display-m: clamp(1.6rem, 3vw, 2.25rem);     /* sectiekoppen */
  --date-num: clamp(2.75rem, 6vw, 4.25rem);     /* dagnummer: typografisch object, als een aanplakbiljet */
  --title: 1.125rem;                            /* eventtitels */
  --body: 1rem;
  --small: 0.875rem;
  --mono-size: 0.8125rem;
  --mono-tracking: 0.06em;

  --leading-display: 0.94;
  --leading-body: 1.55;

  /* Spacing (basis 4px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* Vorm */
  --radius-btn: 2px;    /* knoppen, inputs, badges, chips */
  --radius-card: 4px;   /* cards */
  --radius-stage: 0;    /* podiumvlakken en foto's: hoekig */

  /* Maat */
  --content-max: 1120px;
  --agenda-max: 780px;
  --tap-min: 44px;
}