/* ==========================================================================
   BBVF design tokens
   Kleuren in OKLCH met hex-terugval voor oudere browsers (hex berekend met tools/palette.py).
   Stijl "Maandagavond": nachtblauw als basis, limegroen voor actie, petrol uit het logo.
   ========================================================================== */

:root {
  /* Nachtblauw: donkere secties, hero, programma */
  --night-950: #040c20;
  --night-900: #081733;
  --night-800: #0f2345;
  --night-700: #1b3259;
  --night-600: #2b4872;

  /* Limegroen: acties, highlights (doorontwikkeling van het oude #8cc14c) */
  --lime-300: #d9fc7b;
  --lime-400: #c6f648;
  --lime-500: #ace92c;
  --lime-700: #467212;

  /* Petrol: uit de ring van het logo */
  --petrol-200: #b3e1ec;
  --petrol-300: #7fcbde;
  --petrol-400: #48adc8;
  --petrol-500: #2891ac;
  --petrol-700: #045871;

  /* Signaal: alleen voor "live" */
  --signal: #ff7527;

  /* Licht */
  --white: #fafcfe;
  --paper: #f4f7fb;
  --paper-2: #e9eef4;
  --line: #d2d8df;
  --ink: #101828;
  --ink-2: #475061;

  /* Lijnen van de sporthalvloer (decoratief motief) */
  --floor-red: #e24942;
  --floor-blue: #3072d0;
  --floor-yellow: #f4cd4b;

  /* Poulekleuren (altijd samen met een label gebruikt) */
  --poule-d: var(--petrol-400);
  --poule-ha: var(--lime-400);
  --poule-hb: var(--floor-yellow);
  --poule-h1: var(--lime-400);
  --poule-h2: var(--floor-yellow);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --night-950: oklch(0.16 0.045 262);
    --night-900: oklch(0.21 0.06 262);
    --night-800: oklch(0.26 0.07 261);
    --night-700: oklch(0.32 0.075 260);
    --night-600: oklch(0.4 0.08 258);
    --lime-300: oklch(0.94 0.16 122);
    --lime-400: oklch(0.91 0.2 124);
    --lime-500: oklch(0.86 0.21 127);
    --lime-700: oklch(0.5 0.13 132);
    --petrol-200: oklch(0.88 0.05 215);
    --petrol-300: oklch(0.8 0.08 215);
    --petrol-400: oklch(0.7 0.1 218);
    --petrol-500: oklch(0.61 0.1 220);
    --petrol-700: oklch(0.43 0.08 225);
    --signal: oklch(0.72 0.19 45);
    --white: oklch(0.99 0.004 250);
    --paper: oklch(0.975 0.006 250);
    --paper-2: oklch(0.948 0.01 250);
    --line: oklch(0.88 0.012 255);
    --ink: oklch(0.21 0.035 264);
    --ink-2: oklch(0.43 0.03 262);
    --floor-red: oklch(0.62 0.19 27);
    --floor-blue: oklch(0.56 0.16 258);
    --floor-yellow: oklch(0.86 0.15 92);
  }
}

:root {
  /* Typografie */
  --font-display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Vloeiende typeschaal, verhouding ongeveer 1.25 */
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.4rem, 1.7rem + 3.5vw, 4.6rem);
  --step-5: clamp(3rem, 1.9rem + 5.5vw, 6.8rem);
  --step-hero: clamp(3.3rem, 0.6rem + 13.5vw, 12rem);

  /* Ruimte */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --section-pad: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --container: 80rem;
  --measure: 68ch;

  /* Vorm */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --skew: -8deg;

  /* Diepte (alleen op lichte vlakken, getint naar nachtblauw) */
  --shadow-1: 0 1px 2px rgb(8 23 51 / 0.06), 0 2px 8px rgb(8 23 51 / 0.06);
  --shadow-2: 0 2px 4px rgb(8 23 51 / 0.06), 0 12px 32px rgb(8 23 51 / 0.12);
  --shadow-3: 0 4px 8px rgb(8 23 51 / 0.08), 0 24px 64px rgb(8 23 51 / 0.2);

  /* Beweging: exponentiële ease-out, geen bounce */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-cubic: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* Lagen */
  --z-header: 50;
  --z-menu: 60;
  --z-dialog: 80;
  --z-toast: 90;
  --z-intro: 100;

  --header-h: 4.25rem;
}

@media (max-width: 640px) {
  :root {
    --header-h: 3.75rem;
  }
}