/* Kwistig: gedeeld designsysteem. Lettertypen, kleuren en thema's als custom properties.
   Nu gebruikt door de landing (/) en /maken; het quizscherm en de telefoon kunnen dit later overnemen. */

@font-face {
  font-family: 'Bricolage Grotesque';
  /* vaste instantie van het variabele lettertype (opsz 96, wght 800, wdth 100; tools/fonts): 22 kB in plaats van 131 kB */
  src: url('/fonts/bricolage-grotesque-800.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk.woff2') format('woff2-variations'), url('/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* merk en materiaal */
  --kroegzwart: #130D09;
  --marine: #0E1E3F;
  --messing: #E3A63B;
  --messing-licht: #F6D58C;
  --messing-donker: #8E6420;
  --a-oranje: #FF4B0F;
  --b-blauw: #1263FF;
  --schuim: #FFF1DC;
  --schuim-rgb: 255, 241, 220;
  --hout: #3A2416;
  --inkt: #0E1E3F;                 /* tekst op schuim (bierviltje, menukaart, bon) */

  /* tekst op donker */
  --tekst: var(--schuim);
  --tekst-zacht: rgba(255, 241, 220, .74);
  --lijn: rgba(227, 166, 59, .28);

  /* thema (standaard: kroeg) */
  --accent: #FF4B0F;
  --accent-2: #E3A63B;
  --accent2: var(--accent-2);
  --accent-rgb: 255, 75, 15;
  --accent2-rgb: 227, 166, 59;
  --accent-d: #b23409;
  --on: #130D09;
  /* letters van de antwoorden: overal dezelfde kleur (tv en telefoon) */
  --letter-a: #FF4B0F; --letter-b: #1263FF; --letter-c: #1E9E5A; --letter-d: #E3A63B; --letter-e: #8A4DFF; --letter-f: #12B5B0;                   /* tekst op --accent (AA, per thema gekozen) */
  --glow: rgba(255, 75, 15, .38);
  --podium-16x9: image-set(url('/assets/lobby-kroeg.avif') type('image/avif'), url('/assets/lobby-kroeg.webp') type('image/webp'));
  --podium-9x16: image-set(url('/assets/lobby-kroeg-m.avif') type('image/avif'), url('/assets/lobby-kroeg-m.webp') type('image/webp'));

  /* typografie */
  --kop: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --tekstletter: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --h1: clamp(3rem, 8vw, 8.5rem);
  --h2: clamp(2rem, 4.5vw, 4rem);
  --h3: clamp(1.25rem, 2vw, 1.75rem);
  --body: 1.125rem;
  --maat: 62ch;

  /* vorm en beweging */
  --rand: 1.5px solid var(--messing);
  --schaduw-object: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 18px 40px -14px rgba(0, 0, 0, .7);
  --uit: cubic-bezier(.2, .8, .2, 1);
}

/* Thema's overschrijven alleen accent, accent-2, glow (en de tekstkleur op het accent) en de achtergrond.
   (html[...]: wint van de oude themakleuren in style.css, die het quizscherm nog laadt)
   Logo en de A/B-merkkleuren blijven altijd gelijk. */
html[data-thema="sinterklaas"] { --accent: #D4152B; --accent-2: #E3A63B; --on: #FFFFFF; --glow: rgba(212, 21, 43, .42); --podium-16x9: image-set(url('/assets/lobby-sinterklaas.avif') type('image/avif'), url('/assets/lobby-sinterklaas.webp') type('image/webp')); --podium-9x16: image-set(url('/assets/lobby-sinterklaas-m.avif') type('image/avif'), url('/assets/lobby-sinterklaas-m.webp') type('image/webp')); --accent2: #E3A63B; --accent-rgb: 212, 21, 43; --accent2-rgb: 227, 166, 59; --accent-d: #940e1e; }
html[data-thema="halloween"] { --accent: #FF7A00; --accent-2: #8A4DFF; --on: #130D09; --glow: rgba(255, 122, 0, .4);  --podium-16x9: image-set(url('/assets/lobby-halloween.avif') type('image/avif'), url('/assets/lobby-halloween.webp') type('image/webp'));   --podium-9x16: image-set(url('/assets/lobby-halloween-m.avif') type('image/avif'), url('/assets/lobby-halloween-m.webp') type('image/webp')); --accent2: #8A4DFF; --accent-rgb: 255, 122, 0; --accent2-rgb: 138, 77, 255; --accent-d: #b25500; }
html[data-thema="verjaardag"] { --accent: #FF3D8B; --accent-2: #FFC83D; --on: #130D09; --glow: rgba(255, 61, 139, .4);  --podium-16x9: image-set(url('/assets/lobby-verjaardag.avif') type('image/avif'), url('/assets/lobby-verjaardag.webp') type('image/webp'));  --podium-9x16: image-set(url('/assets/lobby-verjaardag-m.avif') type('image/avif'), url('/assets/lobby-verjaardag-m.webp') type('image/webp')); --accent2: #FFC83D; --accent-rgb: 255, 61, 139; --accent2-rgb: 255, 200, 61; --accent-d: #b22a61; }
html[data-thema="kerst"] { --accent: #E0312B; --accent-2: #1E8F5A; --on: #FFFFFF; --glow: rgba(224, 49, 43, .4);  --podium-16x9: image-set(url('/assets/lobby-kerst.avif') type('image/avif'), url('/assets/lobby-kerst.webp') type('image/webp'));       --podium-9x16: image-set(url('/assets/lobby-kerst-m.avif') type('image/avif'), url('/assets/lobby-kerst-m.webp') type('image/webp')); --accent2: #1E8F5A; --accent-rgb: 224, 49, 43; --accent2-rgb: 30, 143, 90; --accent-d: #9c221e; }
html[data-thema="oudnieuw"] { --accent: #E3A63B; --accent-2: #8FB8FF; --on: #130D09; --glow: rgba(227, 166, 59, .4);  --podium-16x9: image-set(url('/assets/lobby-oudnieuw.avif') type('image/avif'), url('/assets/lobby-oudnieuw.webp') type('image/webp'));    --podium-9x16: image-set(url('/assets/lobby-oudnieuw-m.avif') type('image/avif'), url('/assets/lobby-oudnieuw-m.webp') type('image/webp')); --accent2: #8FB8FF; --accent-rgb: 227, 166, 59; --accent2-rgb: 143, 184, 255; --accent-d: #9e7429; }
html[data-thema="koningsdag"] { --accent: #FF6A00; --accent-2: #1263FF; --on: #130D09; --glow: rgba(255, 106, 0, .4);  --podium-16x9: image-set(url('/assets/lobby-koningsdag.avif') type('image/avif'), url('/assets/lobby-koningsdag.webp') type('image/webp'));  --podium-9x16: image-set(url('/assets/lobby-koningsdag-m.avif') type('image/avif'), url('/assets/lobby-koningsdag-m.webp') type('image/webp')); --accent2: #1263FF; --accent-rgb: 255, 106, 0; --accent2-rgb: 18, 99, 255; --accent-d: #b24a00; }
html[data-thema="carnaval"] { --accent: #FF2E93; --accent-2: #FFD400; --on: #130D09; --glow: rgba(255, 46, 147, .4);  --podium-16x9: image-set(url('/assets/lobby-carnaval.avif') type('image/avif'), url('/assets/lobby-carnaval.webp') type('image/webp'));    --podium-9x16: image-set(url('/assets/lobby-carnaval-m.avif') type('image/avif'), url('/assets/lobby-carnaval-m.webp') type('image/webp')); --accent2: #FFD400; --accent-rgb: 255, 46, 147; --accent2-rgb: 255, 212, 0; --accent-d: #b22066; }
html[data-thema="pasen"] { --accent: #F2C230; --accent-2: #7CC47A; --on: #130D09; --glow: rgba(242, 194, 48, .36); --podium-16x9: image-set(url('/assets/lobby-pasen.avif') type('image/avif'), url('/assets/lobby-pasen.webp') type('image/webp'));       --podium-9x16: image-set(url('/assets/lobby-pasen-m.avif') type('image/avif'), url('/assets/lobby-pasen-m.webp') type('image/webp')); --accent2: #7CC47A; --accent-rgb: 242, 194, 48; --accent2-rgb: 124, 196, 122; --accent-d: #a98721; }
html[data-thema="zomer"] { --accent: #12B5B0; --accent-2: #FFB627; --on: #130D09; --glow: rgba(18, 181, 176, .38); --podium-16x9: image-set(url('/assets/lobby-zomer.avif') type('image/avif'), url('/assets/lobby-zomer.webp') type('image/webp'));       --podium-9x16: image-set(url('/assets/lobby-zomer-m.avif') type('image/avif'), url('/assets/lobby-zomer-m.webp') type('image/webp')); --accent2: #FFB627; --accent-rgb: 18, 181, 176; --accent2-rgb: 255, 182, 39; --accent-d: #0c7e7b; }