/* theme.css: gebouwd door _quizkit/build.py uit design/tokens.css en de thema's. Niet met de hand wijzigen. */

@font-face { font-family: 'Fraunces'; src: url(fonts/Fraunces.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(fonts/Fraunces-Italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/DMSans.woff2) format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(fonts/Caveat.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* _quizkit/design/tokens.css: basis-tokens van de quizschil, richting "Bierviltje".
 * Uitleg en keuzes: RICHTING.md. Een thema (themes/*.css) overschrijft ALLEEN deze
 * custom properties, nooit selectors of layout.
 *
 * Fonts (OFL): Fraunces en DM Sans en Caveat staan in _partykit/fonts. De UI laadt ze
 * met @font-face vanuit de build; hier alleen de namen.
 */
:root {
  /* ---------------------------------------------------------------- lettertypes */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;       /* titels, getallen, teamnamen */
  --font-vraag:   'Fraunces', 'Georgia', 'Times New Roman', serif;       /* de vraag zelf */
  --font-ui:      'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* opties, knoppen, labels */
  --font-krabbel: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;       /* alleen punten-krabbels van de quizmaster */
  --display-gewicht: 900;
  --display-opsz: 144;          /* Fraunces optische maat: groot = zachter en eigenwijzer */
  --vraag-gewicht: 600;
  --vraag-opsz: 72;
  --ui-gewicht: 600;
  --ui-vet: 800;

  /* ---------------------------------------------------------------- kleur: de tafel */
  --tafel:        #3A0F1C;   /* achtergrond: bordeaux kroegtapijt */
  --tafel-2:      #4C1626;   /* verhoogd vlak op de tafel (balk, paneel) */
  --tafel-3:      #5E1D30;   /* lijnen, lege plekken */
  --op-tafel:     #FFF1E4;   /* tekst op de tafel (15:1) */
  --op-tafel-zacht: #E9C3C0; /* tweede tekst op de tafel (10:1) */

  /* kleur: het viltje (kaart, optie, team) */
  --vilt:         #FBEFE3;   /* voorkant viltje */
  --vilt-2:       #F1DCCB;   /* achterkant, ingedrukt, lege slot */
  --inkt:         #2A0B14;   /* tekst op vilt (16:1) */
  --inkt-zacht:   #6E4450;   /* tweede tekst op vilt (7:1) */
  --drukrand:     rgba(42, 11, 20, .16); /* gedrukte binnenrand van een viltje */

  /* kleur: accent en status */
  --bitter:       #FF9E3D;   /* jouw keuze, timer, het echte getal (8:1 op tafel) */
  --op-bitter:    #2A0B14;
  --goed:         #6FD6BF;   /* goed, op tafel (9.5:1); altijd samen met ✓ */
  --goed-inkt:    #16695F;   /* goed, op vilt (5.8:1): stempel */
  --fout:         #FF8F80;   /* fout, op tafel (7.5:1); altijd samen met ✗ */
  --fout-inkt:    #A3322A;   /* fout, op vilt (6:1) */

  /* ---------------------------------------------------------------- tapijt (achtergrondmotief) */
  --tapijt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M48 4 92 48 48 92 4 48Z' fill='none' stroke='%23461424' stroke-width='3'/%3E%3Cg fill='%23461424'%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3Ccircle cx='48' cy='33' r='5'/%3E%3Ccircle cx='48' cy='63' r='5'/%3E%3Ccircle cx='33' cy='48' r='5'/%3E%3Ccircle cx='63' cy='48' r='5'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='96' cy='0' r='7'/%3E%3Ccircle cx='0' cy='96' r='7'/%3E%3Ccircle cx='96' cy='96' r='7'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='3' fill='%23581C2E'/%3E%3C/svg%3E");
  --tapijt-maat: 96px;

  /* ---------------------------------------------------------------- vorm, schaduw, kanteling */
  --hoek:        18px;                 /* rechthoekig viltje op telefoon */
  --vorm-rond:   50%;
  --vorm-vierkant: 24%;
  --schaduw-mat: 0 2px 0 rgba(0,0,0,.18), 0 12px 24px -8px rgba(18,0,6,.6);
  --schaduw-op:  0 3px 0 rgba(0,0,0,.2), 0 22px 40px -12px rgba(18,0,6,.7); /* opgetild (keuze, winnaar) */
  --kantel:      1.2deg;               /* max. scheefstand van een viltje; 0 bij reduced motion mag blijven */

  /* tv-typeschaal: zie het blok [data-tv] hieronder. 1 u = 1vmin (1080p: 10.8px) */
  --tv-u: 1vmin;

  /* telefoon-typeschaal (px, basis 17) */
  --tel-fs-klein: 14px;
  --tel-fs-tekst: 17px;
  --tel-fs-optie: 20px;
  --tel-fs-kop:   26px;
  --tel-fs-groot: 44px;
  --tel-tik:      56px;   /* minimale hoogte van alles wat je aantikt */

  /* ---------------------------------------------------------------- beweging */
  --flip-duur:   520ms;                            /* viltje omdraaien (onthulling) */
  --flip-curve:  cubic-bezier(.3, 1.45, .5, 1);
  --land-duur:   280ms;                            /* viltje landt op tafel (join, stem binnen) */
  --land-curve:  cubic-bezier(.2, .9, .3, 1.25);
  --schuif-duur: 700ms;                            /* getallenlijn, stand */
  --schuif-curve: cubic-bezier(.22, 1, .36, 1);

  /* ---------------------------------------------------------------- teams: kleur + patroon + vorm
   * 8 drukinkten (alle >= 3.3:1 op --vilt) x 2 vormen. Team n (0-7): rond, inkt n, patroon n.
   * Team n+8: vierkant, inkt n, patroon (n+4) mod 8. Plus altijd het teamnummer op het viltje.
   * Een thema laat deze staan (herkenbaarheid gaat voor sfeer). */
  --team-0: #C8401E;  /* vermiljoen */
  --team-1: #1D4F9A;  /* kobalt */
  --team-2: #0E8A6A;  /* zeegroen */
  --team-3: #C0508A;  /* framboos */
  --team-4: #A07A00;  /* oker */
  --team-5: #3389C4;  /* hemelsblauw */
  --team-6: #5E2F82;  /* aubergine */
  --team-7: #2A0B14;  /* inkt */

  /* patronen: gebruik als `background` op een laag met `color: var(--tc)`; schalen met font-size */
  --patroon-0: repeating-linear-gradient(45deg, currentColor 0 .32em, transparent 0 .8em);             /* schuine streep */
  --patroon-1: radial-gradient(circle, currentColor 0 .2em, transparent .22em) 0 0 / .75em .75em;      /* stip */
  --patroon-2: conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 1em 1em; /* dambord */
  --patroon-3: repeating-linear-gradient(0deg, currentColor 0 .3em, transparent 0 .72em);              /* liggende streep */
  --patroon-4: linear-gradient(135deg, currentColor 25%, transparent 0) -.45em 0 / .9em .9em, linear-gradient(225deg, currentColor 25%, transparent 0) -.45em 0 / .9em .9em, linear-gradient(315deg, currentColor 25%, transparent 0) 0 0 / .9em .9em, linear-gradient(45deg, currentColor 25%, transparent 0) 0 0 / .9em .9em; /* zigzag */
  --patroon-5: repeating-radial-gradient(circle at 50% 50%, currentColor 0 .22em, transparent 0 .6em); /* ringen */
  --patroon-6: linear-gradient(currentColor .14em, transparent 0) 0 0 / .62em .62em, linear-gradient(90deg, currentColor .14em, transparent 0) 0 0 / .62em .62em; /* ruitjes */
  --patroon-7: currentColor;                                                                          /* effen */
}

/* Tv-maten rekenen met de --tv-u van het element zelf: zet data-tv op de body van
 * de Stage (en op elk tv-kader in een mockup), anders erven ze de :root-waarde. */
:root, [data-tv] {
  --hoek-tv:     calc(var(--tv-u) * 1.8);
  --tv-marge-x: calc(var(--tv-u) * 8.9);   /* 5% van 1920 */
  --tv-marge-y: calc(var(--tv-u) * 5);
  --tv-fs-min:    calc(var(--tv-u) * 2.4); /* nooit kleiner op de tv */
  --tv-fs-label:  calc(var(--tv-u) * 2.6);
  --tv-fs-tekst:  calc(var(--tv-u) * 3.2);
  --tv-fs-optie:  calc(var(--tv-u) * 4.6);
  --tv-fs-vraag:  calc(var(--tv-u) * 6.1);
  --tv-fs-titel:  calc(var(--tv-u) * 9);
  --tv-fs-reus:   calc(var(--tv-u) * 16);  /* het echte getal, de code, de finale-score */
}

/* Koppeling team → tokens. Zet data-team="n" op een element; gebruik daar
 * --tc (kleur), --pat (patroon) en --vorm (border-radius). Alleen custom properties. */
[data-team="0"]  { --tc: var(--team-0); --pat: var(--patroon-0); --vorm: var(--vorm-rond); }
[data-team="1"]  { --tc: var(--team-1); --pat: var(--patroon-1); --vorm: var(--vorm-rond); }
[data-team="2"]  { --tc: var(--team-2); --pat: var(--patroon-2); --vorm: var(--vorm-rond); }
[data-team="3"]  { --tc: var(--team-3); --pat: var(--patroon-3); --vorm: var(--vorm-rond); }
[data-team="4"]  { --tc: var(--team-4); --pat: var(--patroon-4); --vorm: var(--vorm-rond); }
[data-team="5"]  { --tc: var(--team-5); --pat: var(--patroon-5); --vorm: var(--vorm-rond); }
[data-team="6"]  { --tc: var(--team-6); --pat: var(--patroon-6); --vorm: var(--vorm-rond); }
[data-team="7"]  { --tc: var(--team-7); --pat: var(--patroon-7); --vorm: var(--vorm-rond); }
[data-team="8"]  { --tc: var(--team-0); --pat: var(--patroon-4); --vorm: var(--vorm-vierkant); }
[data-team="9"]  { --tc: var(--team-1); --pat: var(--patroon-5); --vorm: var(--vorm-vierkant); }
[data-team="10"] { --tc: var(--team-2); --pat: var(--patroon-6); --vorm: var(--vorm-vierkant); }
[data-team="11"] { --tc: var(--team-3); --pat: var(--patroon-7); --vorm: var(--vorm-vierkant); }
[data-team="12"] { --tc: var(--team-4); --pat: var(--patroon-0); --vorm: var(--vorm-vierkant); }
[data-team="13"] { --tc: var(--team-5); --pat: var(--patroon-1); --vorm: var(--vorm-vierkant); }
[data-team="14"] { --tc: var(--team-6); --pat: var(--patroon-2); --vorm: var(--vorm-vierkant); }
[data-team="15"] { --tc: var(--team-7); --pat: var(--patroon-3); --vorm: var(--vorm-vierkant); }

@media (prefers-reduced-motion: reduce) {
  :root { --flip-duur: 1ms; --land-duur: 1ms; --schuif-duur: 1ms; }
}


/* ---- thema christmas (design/themes/christmas.css) */
/* Thema kerst voor de quizschil: "Kerst in de kroeg, buiten sneeuwt het".
 * Overschrijft ALLEEN tokens uit ../tokens.css. Geen selectors, geen layout.
 * Bewust anders dan Most Said-kerst (dennengroen, cranberry, goud): winternacht-
 * blauw met een kersttrui-breisel, sneeuwwitte viltjes en koraalrood als accent.
 * Teamkleuren en patronen blijven gelijk (herkenbaarheid gaat voor sfeer). */
html[data-theme="christmas"] {
  --tafel:          #10283A;   /* winternacht */
  --tafel-2:        #173650;
  --tafel-3:        #21476A;
  --op-tafel:       #FFF6EC;   /* 14:1 */
  --op-tafel-zacht: #BCD0E0;   /* 9.5:1 */

  --vilt:           #FFFAF3;   /* sneeuwwit */
  --vilt-2:         #EADFD2;
  --inkt:           #1A1420;   /* 17:1 op vilt */
  --inkt-zacht:     #574A5E;
  --drukrand:       rgba(26, 20, 32, .16);

  --bitter:         #FF6F61;   /* koraalrood: 5.5:1 op tafel */
  --op-bitter:      #1A1420;   /* 6.6:1 */
  --goed:           #7EE0C3;
  --goed-inkt:      #16695F;
  --fout:           #FFB0A6;
  --fout-inkt:      #A3322A;

  /* kersttrui-breisel: kruissteekjes en een sneeuwvlok, laag contrast */
  --tapijt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg stroke='%231B3B58' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M42 28v28M28 42h28M32 32l20 20M52 32 32 52'/%3E%3Cpath d='M4 4l6 6M10 4 4 10M74 74l6 6M80 74l-6 6M74 4l6 6M80 4l-6 6M4 74l6 6M10 74l-6 6'/%3E%3C/g%3E%3Cg fill='%231B3B58'%3E%3Ccircle cx='42' cy='6' r='2.5'/%3E%3Ccircle cx='42' cy='78' r='2.5'/%3E%3Ccircle cx='6' cy='42' r='2.5'/%3E%3Ccircle cx='78' cy='42' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --tapijt-maat: 84px;

  --kantel: 1.6deg;   /* feestelijker, iets schever */
}