/* GEGENEREERD — bron: eventmodel/sketches/dubbeltoernooi-federer-style-mock/style-guide.css. Niet hier wijzigen; fix de bron en draai ./generate. */
/* ==========================================================================
   Centre Court: design-systeem voor het dubbeltoernooi van 19 december 2026
   ==========================================================================
   Esthetiek: een verzorgde uitnodiging. Gebroken wit, diep gras-groen, een
   vleug aubergine en een dunne gouden lijn. Schreefletter voor koppen, veel
   lucht, geen versiering buiten lijnwerk.

   Waarom deze richting?
   - Casus: "een avond waarbij tennis centraal staat, maar het vooral gaat om
     de gezelligheid", met Federer style als thema van de hele avond (kleding,
     spel en sfeer). Dat vraagt om ingetogen klasse, niet om een sportsite.
   - Modelleur (11-11): de Centre Court-richting past, het vorige systeem
     (nachtblauw met neongeel en penseelstreken) vervalt volledig.
   - Besluiten 05-11: pubquiz van 5 seconden, speelmelding, uitslag invullen
     op de baan. Dus een rustige leesletter van 17px, tikdoelen van 48px, een
     eigen donker palet en vaste cijferbreedte voor score, tijd en baan.
   - Model: actors Visitor en User, formulieren met een duidelijke primaire
     actie. Goud is alleen lijn: op licht haalt het geen contrast voor tekst.
   - Literatuur: WCAG 2.2 AA, W3C Design Tokens, Refactoring UI, Laws of UX,
     60-30-10 (ivoor, groen, aubergine en goud als accent).

   Kenmerken:
   - Cormorant Garamond voor koppen (klassiek, zwaarte 600 voor leesbaarheid),
     Source Sans 3 voor tekst, Source Code Pro voor scores en tijden.
   - De haarlijn: een dunne gouden lijn, soms dubbel, als scheiding en als
     kader. Het enige ornament, naast het net-motief van fijne lijnen.
   - Effen vlakken, geen verlopen, geen schaduw behalve de lade.
   - Radius klein (2 tot 6px): strak, als een baanlijn.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/8fbaa36df2a892d0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/291655adcb38b6b4.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/8fbaa36df2a892d0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/291655adcb38b6b4.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/a55f75e9e7fa133c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/d9ec821052ff94a7.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/a55f75e9e7fa133c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/d9ec821052ff94a7.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/a55f75e9e7fa133c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/d9ec821052ff94a7.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/9ce5d14d3a2b3011.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/9db6e6c6f6a7fe77.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/9ce5d14d3a2b3011.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/9db6e6c6f6a7fe77.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/9ce5d14d3a2b3011.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/9db6e6c6f6a7fe77.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/288bc398c253f4e3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/181da826c709fd98.woff2) format('woff2');
  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;
}


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ivoor: de ondergrond */
  --ivoor-50:  #FDFBF7;
  --ivoor-100: #F7F4EC;
  --ivoor-200: #EEE9DC;
  --ivoor-300: #DDD6C4;
  --ivoor-400: #8A8473;
  --ivoor-500: #635F54;
  --ivoor-600: #55524A;
  --ivoor-700: #3F3D37;
  --ivoor-800: #2A2A26;
  --ivoor-900: #1E2420;

  /* Groen: het merk, diep als de baan in de avond */
  --groen-50:  #EEF3EF;
  --groen-100: #DCE7DF;
  --groen-200: #B7CCBD;
  --groen-300: #8DAE97;
  --groen-400: #5F8A6D;
  --groen-500: #3F6B4E;
  --groen-600: #2D5139;
  --groen-700: #1F3D2B;
  --groen-800: #182F21;
  --groen-900: #101F16;

  /* Aubergine: de vleug, voor links en nadruk */
  --aubergine-50:  #F4EDF5;
  --aubergine-100: #E7D9E9;
  --aubergine-200: #CDB1D1;
  --aubergine-300: #AE87B3;
  --aubergine-400: #895F8E;
  --aubergine-500: #6A406F;
  --aubergine-600: #5A3560;
  --aubergine-700: #4B2A4F;
  --aubergine-800: #3A203D;
  --aubergine-900: #29162B;

  /* Goud: alleen als lijn of als tekst op donker groen */
  --goud-200: #E8DDBF;
  --goud-300: #D9C58F;
  --goud-400: #C8AE74;
  --goud-500: #B89B5E;
  --goud-700: #7A6330;

  /* Vlakken */
  --color-bg:               var(--ivoor-100);
  --color-bg-subtle:        var(--ivoor-200);
  --color-bg-surface:       var(--ivoor-50);
  --color-bg-surface-hover: var(--groen-50);
  --color-bg-muted:         var(--ivoor-300);
  --color-bg-raised:        var(--ivoor-50);

  /* Randen */
  --color-border:        var(--ivoor-300);
  --color-border-subtle: var(--ivoor-200);
  --color-border-strong: var(--ivoor-400);
  --color-border-focus:  var(--aubergine-700);

  /* Primair en accent */
  --color-primary:        var(--groen-700);
  --color-primary-bright: var(--groen-600);
  --color-primary-soft:   var(--groen-100);
  --color-primary-glow:   rgba(31, 61, 43, 0.16);
  --color-accent:         var(--goud-500);
  --color-accent-bright:  var(--goud-400);
  --color-accent-2:       var(--aubergine-700);
  --color-on-accent:      var(--groen-900);
  --color-link:           var(--aubergine-700);

  /* Tekst */
  --color-text:            var(--ivoor-900);
  --color-text-heading:    var(--groen-700);
  --color-text-secondary:  var(--ivoor-600);
  --color-text-muted:      var(--ivoor-500);
  --color-text-on-primary: var(--ivoor-50);
  --color-text-on-danger:  #FFFFFF;

  /* Status */
  --color-success:    #2A5239;
  --color-success-bg: #E3EDE5;
  --color-warning:    #7A4F00;
  --color-warning-bg: #F5EBD2;
  --color-error:      #9B2226;
  --color-error-bg:   #F6E4E2;
  --color-error-soft: #EBC6C2;
  --color-error-glow: rgba(155, 34, 38, 0.18);
  --color-danger:     #9B2226;
  --color-danger-soft: #F6E4E2;
  --color-info:       var(--aubergine-700);
  --color-info-bg:    var(--aubergine-50);

  /* Grafieken */
  --chart-1: #1F3D2B;
  --chart-2: #8E3B6A;
  --chart-3: #B7791F;
  --chart-4: #2C6E91;
  --chart-5: #7C8A2A;
  --chart-6: #A6483A;
  --chart-grid: var(--ivoor-300);
  --chart-axis: var(--ivoor-500);
  --chart-vorig: var(--ivoor-400);
  --chart-goed: var(--color-success);
  --chart-let-op: var(--color-warning);
  --chart-slecht: var(--color-error);
  --chart-schatting: var(--groen-100);

  /* Typografie */
  --font-heading: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Source Code Pro', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  --leading-tight:   1.08;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.005em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;

  /* Ruimte */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);

  /* Radius: klein en strak */
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-xl:   6px;
  --radius-2xl:  8px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Schaduw: bijna niets. xl valt naar links, dat is de lade van de renderer. */
  --shadow-sm:   0 1px 1px rgba(30, 36, 32, 0.05);
  --shadow-md:   0 1px 3px rgba(30, 36, 32, 0.08);
  --shadow-lg:   0 6px 18px rgba(30, 36, 32, 0.10);
  --shadow-xl:   -8px 0 28px rgba(30, 36, 32, 0.16);
  --shadow-glow: 0 0 0 3px rgba(75, 42, 79, 0.18);

  /* Beweging */
  --ease-out:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-fast:   120ms var(--ease-out);
  --transition-normal: 200ms var(--ease-out);

  /* Layout */
  --container-max:     66rem;
  --container-padding: 1.25rem;

  /* Toegankelijkheid */
  --focus-ring: 2px solid var(--color-border-focus);
  --tap-target: 3rem;

  /* Het lijnwerk */
  --haarlijn: 1px solid var(--goud-500);
  --baanlijn: 3px double var(--goud-500);
}


/* --------------------------------------------------------------------------
   Donker palet: de kantine 's avonds. Goud wordt hier de primaire kleur.
   -------------------------------------------------------------------------- */
:root:root[data-theme="dark"] {
  --color-bg:               #101C15;
  --color-bg-subtle:        #14231A;
  --color-bg-surface:       #182A1F;
  --color-bg-surface-hover: #1F3527;
  --color-bg-muted:         #243D2D;
  --color-bg-raised:        #1F3527;

  --color-border:        #36513F;
  --color-border-subtle: #27402F;
  --color-border-strong: #7E9585;
  --color-border-focus:  #D9C58F;

  --color-primary:        #D9C58F;
  --color-primary-bright: #E8DDBF;
  --color-primary-soft:   #2B4533;
  --color-primary-glow:   rgba(217, 197, 143, 0.26);
  --color-link:           #D9B8DE;

  --color-text:            #F2EEE2;
  --color-text-heading:    #F7F3E8;
  --color-text-secondary:  #C4C9BE;
  --color-text-muted:      #A3AB9F;
  --color-text-on-primary: #101F16;
  --color-text-on-danger:  #101F16;

  --color-success:    #8ED1A4;
  --color-success-bg: #1B3A2A;
  --color-warning:    #E8C06A;
  --color-warning-bg: #3A3220;
  --color-error:      #F29A94;
  --color-error-bg:   #3F2527;
  --color-error-soft: #55302F;
  --color-error-glow: rgba(242, 154, 148, 0.28);
  --color-danger:     #F29A94;
  --color-danger-soft: #3F2527;
  --color-info:       #D9B8DE;
  --color-info-bg:    #34233A;

  --chart-1: #D9C58F;
  --chart-2: #D9A3C6;
  --chart-3: #8DC4DD;
  --chart-4: #9BD0A8;
  --chart-5: #E69E86;
  --chart-6: #B9B0E8;
  --chart-grid: #27402F;
  --chart-axis: #A3AB9F;
  --chart-vorig: #A3AB9F;
  --chart-schatting: #2B4533;

  --shadow-sm:   0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-xl:   -8px 0 28px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 3px rgba(217, 197, 143, 0.22);
}


/* --------------------------------------------------------------------------
   Reset en basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-text-heading); }

::selection { background: var(--goud-300); color: var(--groen-900); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); line-height: var(--leading-relaxed); }
small { font-size: var(--text-sm); color: var(--color-text-secondary); }
strong { font-weight: 700; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kicker {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section { padding-block: var(--space-16); }

.section-header { margin-bottom: var(--space-8); }

.section-title {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--haarlijn);
  font-size: var(--text-3xl);
}

.section-subtitle {
  margin: var(--space-3) 0 0;
  max-width: 40rem;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-6);
}

.baanlijn {
  height: 0;
  margin-block: var(--space-8);
  border: 0;
  border-top: var(--baanlijn);
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  padding-block: var(--space-4);
  background: var(--color-bg);
  border-bottom: var(--haarlijn);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-heading);
  text-decoration: none;
}
.header-logo:hover { color: var(--color-text-heading); }

/* Het merkteken: een monogram in een dunne ring */
.logo-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--goud-500);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-heading);
}

.header-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}


/* --------------------------------------------------------------------------
   De uitnodiging: een groen vlak met een dunne gouden kaderlijn
   -------------------------------------------------------------------------- */
.uitnodiging {
  position: relative;
  background: var(--groen-700);
  color: var(--ivoor-100);
  padding-block: var(--space-16);
}
.uitnodiging::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border: 1px solid var(--goud-500);
  pointer-events: none;
}
.uitnodiging h1 { color: var(--ivoor-50); font-size: var(--text-4xl); max-width: 18ch; }
.uitnodiging p { max-width: 36rem; color: var(--groen-100); font-size: var(--text-lg); }
.uitnodiging .kicker { color: var(--goud-300); }
.uitnodiging-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--goud-500);
}
.uitnodiging-feit { display: block; }
.uitnodiging-feit span { display: block; font-size: var(--text-sm); color: var(--groen-200); }
.uitnodiging-feit strong { display: block; font-size: var(--text-lg); color: var(--ivoor-50); }


/* --------------------------------------------------------------------------
   Knoppen: één primaire actie per scherm
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-bright);
  border-color: var(--color-primary-bright);
  color: var(--color-text-on-primary);
}

.btn-accent {
  background: var(--aubergine-700);
  border-color: var(--aubergine-700);
  color: var(--ivoor-50);
}
.btn-accent:hover {
  background: var(--aubergine-600);
  border-color: var(--aubergine-600);
  color: var(--ivoor-50);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-text-heading);
  color: var(--color-text-heading);
}
.btn-secondary:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text-heading);
}

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-on-danger);
}
.btn-danger:hover {
  background: var(--color-bg-surface);
  color: var(--color-danger);
}

.btn-sm {
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

.btn:disabled,
.btn[disabled] {
  background: var(--color-bg-muted);
  border-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   Kaarten: een dun kader, geen schaduw
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--goud-500);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-muted);
}

.card-body {
  flex: 1;
  padding: var(--space-6);
}

.card-vendor {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-heading);
}

.card-description {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.card-price {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-text-heading);
}
.card-price small { font-family: var(--font-body); font-weight: 400; }

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}


/* --------------------------------------------------------------------------
   Meldingen: kleur plus titel, nooit alleen kleur
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}
.alert + .alert { margin-top: var(--space-3); }

.alert-title {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 700;
}
.alert-message { margin: 0; color: var(--color-text); }

.alert-success { background: var(--color-success-bg); border-color: var(--color-success); }
.alert-success .alert-title { color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.alert-warning .alert-title { color: var(--color-warning); }
.alert-error { background: var(--color-error-bg); border-color: var(--color-error); }
.alert-error .alert-title { color: var(--color-error); }
.alert-info { background: var(--color-info-bg); border-color: var(--color-info); }
.alert-info .alert-title { color: var(--color-info); }


/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.form-control {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--transition-fast);
}
.form-control:hover { border-color: var(--color-text-heading); }
.form-control:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.form-control:disabled { background: var(--color-bg-muted); color: var(--color-text-secondary); }

.form-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}


/* --------------------------------------------------------------------------
   Scorebord: het stat-panel voor de avond
   -------------------------------------------------------------------------- */
.stat-panel {
  padding: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--goud-500);
  border-radius: var(--radius-sm);
}
.stat-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.stat-value {
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
}
.stat-note { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); }


/* --------------------------------------------------------------------------
   Preview-hulp
   -------------------------------------------------------------------------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
}
.swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-surface);
}
.swatch-color { height: 4rem; }
.swatch-name {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Responsive: alleen token-overrides, de layout is van de renderer
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  :root {
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --container-padding: 1.25rem;
  }
}