/* ==========================================================================
   Step Out & Play Design System: "Zomeravond op het trapveld"
   ==========================================================================
   Project: buurtsporten-kaart (sportplekkenkaart voor Den Haag en omstreken).

   Esthetiek: Licht, warm en sportief-grafisch. Warm-wit als ondergrond,
   donker asfalt voor tekst en chrome, zomer-oranje voor de actie. Dunne
   veldbelijning en een middencirkel als ritme. Mobiel eerst.

   Waarom deze richting?
   - Het event-model heeft twee actoren: Beheerder (legt een sportplek vast via
     een FORM) en Sporter (bekijkt de Sportplekkenkaart, een LIST). Een kleine,
     mensgerichte app: geen data-dicht admin-instrument, maar een uitnodiging
     om naar buiten te gaan. Dus warm, luchtig en met grote tikdoelen.
   - Het merkprofiel (Step Out & Play, "Ga je mee?") vraagt letterlijk om
     donker asfalt met warme zomeravond-accenten (oranje, geel, groen), een
     sportief-grafische stijl met veldbelijning, en light-and-warm als standaard.
     Nike/The North Face-energie in de koppen: breed en stevig.
   - Het domein is een kaart met sporten (enum Sport). Elke sport krijgt een
     eigen accent-token voor pins en badges, binnen het warme palet, zodat de
     kaart scanbaar is zonder dat kleur de enige drager is (de pin draagt ook
     een icoon en een label).
   - 60-30-10 (Material 3, Refactoring UI): 60 warm-wit, 30 asfalt, 10 oranje.
   - WCAG 2.2 AA (W3C WAI): oranje is een VLAK met asfalt-tekst (5,9:1). Wit op
     oranje haalt maar 2,8:1 en komt dus nergens voor. Oranje als tekst of
     link is de donkere variant oranje-700 (5,5:1 op wit).
   - Laws of UX (Fitts): tikdoelen minimaal 48px; NN/g: weinig keuzes per
     scherm, de primaire actie is altijd de oranje pil.

   Kenmerken:
   - Montserrat 800/900 voor koppen en kickers (hoofdletters, ruime tracking)
   - Inter voor leestekst (minimaal 16px op mobiel)
   - JetBrains Mono voor coordinaten en tellingen
   - Pil-knoppen, kaarten met radius 16px, zachte warme schaduwen
   - Veldbelijning: 2px lijnen en een middencirkel als sectie-scheider
   - Gele focus-ring met een asfalt binnenrand (zichtbaar op elke ondergrond)
   - Kaart-tokens: asfalt pin-bubbels met een sport-gekleurde ring
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/a9d11b3ffe7aa537.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/e3237528af752eed.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/a9d11b3ffe7aa537.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/e3237528af752eed.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/a9d11b3ffe7aa537.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/e3237528af752eed.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/a9d11b3ffe7aa537.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/e3237528af752eed.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/b19c2080652a3c2b.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/mock/font/cc27b30471250057.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/b19c2080652a3c2b.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/mock/font/cc27b30471250057.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/b19c2080652a3c2b.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/cc27b30471250057.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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/e4fe21c0cb9523a1.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/mock/font/3dac51d0c0ab812a.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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/e4fe21c0cb9523a1.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/mock/font/3dac51d0c0ab812a.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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/mock/font/e4fe21c0cb9523a1.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/mock/font/3dac51d0c0ab812a.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: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/mock/font/e4fe21c0cb9523a1.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/mock/font/3dac51d0c0ab812a.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 {
  /* Asfalt: de 30 (tekst, nav-chrome, pin-bubbels). Warme grijzen. */
  --asfalt-50:   #F7F5F2;
  --asfalt-100:  #EDE9E4;
  --asfalt-200:  #DCD6CF;
  --asfalt-300:  #C2BAB1;
  --asfalt-400:  #9A9188;
  --asfalt-500:  #6B6259;
  --asfalt-600:  #5C554E;
  --asfalt-700:  #3D3833;
  --asfalt-800:  #2A2A2A;
  --asfalt-900:  #1E1E1E;

  /* Zomer-oranje: de 10 (actie). 500 = merk, 700 = oranje als tekst. */
  --oranje-50:   #FFF3EC;
  --oranje-100:  #FFE2D1;
  --oranje-200:  #FFC4A3;
  --oranje-300:  #FFA176;
  --oranje-400:  #FF8452;
  --oranje-500:  #FF6B35;
  --oranje-600:  #E5531D;
  --oranje-700:  #B8420F;
  --oranje-800:  #8F330C;
  --oranje-900:  #66250A;

  /* Zomer-geel: highlight, badges, focus-ring (altijd asfalt erop). */
  --geel-50:     #FFFBF0;
  --geel-100:    #FFF3D6;
  --geel-200:    #FFE7AD;
  --geel-300:    #FFD985;
  --geel-400:    #FFC857;
  --geel-500:    #F2B233;
  --geel-600:    #D6961A;
  --geel-700:    #A87212;
  --geel-800:    #7A520D;
  --geel-900:    #4D3408;

  /* Groen: gras (vlak) en park (tekst, succes). */
  --groen-50:    #EEFAF2;
  --groen-100:   #D5F3DF;
  --groen-200:   #ABE7BF;
  --groen-300:   #7FDA9C;
  --groen-400:   #4ECB71;
  --groen-500:   #2FAE55;
  --groen-600:   #2D8A4E;
  --groen-700:   #1B5E35;
  --groen-800:   #154A2A;
  --groen-900:   #0F351E;

  /* Rood: warm baksteenrood voor fouten. */
  --rood-50:     #FEF1EF;
  --rood-100:    #FCDCD7;
  --rood-200:    #F8B5AB;
  --rood-300:    #F08878;
  --rood-400:    #E35D4A;
  --rood-500:    #C9372C;
  --rood-600:    #B42318;
  --rood-700:    #8F1C13;
  --rood-800:    #6B150E;
  --rood-900:    #470E09;

  /* Avondlucht: info (ingetogen blauw, de lucht na zonsondergang). */
  --lucht-50:    #EAF4FB;
  --lucht-200:   #B5D8F0;
  --lucht-700:   #1F5F8B;

  /* Merk-namen uit het design-profiel */
  --asfalt:      var(--asfalt-900);
  --warm-wit:    #FFF8F0;
  --zomer-oranje: var(--oranje-500);
  --zomer-geel:  var(--geel-400);
  --gras-groen:  var(--groen-400);
  --park-groen:  var(--groen-700);

  /* Sport-accenten: ring op een asfalt-bubbel (alle >= 6:1 tegen asfalt)
     en badge-vlak met asfalt-inkt (alle >= 6:1). */
  --sport-voetbal:            #4ECB71;
  --sport-voetbal-ink:        #1E1E1E;
  --sport-basketbal:          #FF8C42;
  --sport-basketbal-ink:      #1E1E1E;
  --sport-tafeltennis:        #5BB8F0;
  --sport-tafeltennis-ink:    #1E1E1E;
  --sport-tennis:             #C2DA3C;
  --sport-tennis-ink:         #1E1E1E;
  --sport-beachvolleybal:     #FF7FA0;
  --sport-beachvolleybal-ink: #1E1E1E;
  --sport-skaten:             #A98BF5;
  --sport-skaten-ink:         #1E1E1E;
  --sport-buitenfitness:      #2EC4B6;
  --sport-buitenfitness-ink:  #1E1E1E;
  --sport-jeu-de-boules:      #FFC857;
  --sport-jeu-de-boules-ink:  #1E1E1E;

  /* Categorie-kleuren voor de generieke mock-renderer: `--cat-<enum-code>` kleurt kaart-pinnen,
     legenda en enum-chips per waarde (anders valt de renderer terug op een tint-rotatie). */
  --cat-voetbal:        var(--sport-voetbal);
  --cat-basketbal:      var(--sport-basketbal);
  --cat-tafeltennis:    var(--sport-tafeltennis);
  --cat-tennis:         var(--sport-tennis);
  --cat-beachvolleybal: var(--sport-beachvolleybal);
  --cat-skaten:         var(--sport-skaten);
  --cat-buitenfitness:  var(--sport-buitenfitness);
  --cat-jeu-de-boules:  var(--sport-jeu-de-boules);
  /* De kaart-tegels van de mock: gedempt, zodat de sport-kleuren eruit springen. */
  --map-tiles: grijs;

  /* Kaart */
  --map-pin-bg:      var(--asfalt-900);
  --map-pin-text:    #FFFFFF;
  --map-pin-ring:    var(--oranje-500);
  --map-pin-size:    2.75rem;
  --map-popup-bg:    #FFFFFF;
  --map-bg:          #EFE8DD;
  --map-line:        rgba(30, 30, 30, 0.08);
  --map-tile-filter: saturate(0.7) sepia(0.12) brightness(1.02);

  /* Semantische rollen: vlakken */
  --color-bg:                #FFF8F0;
  --color-bg-subtle:         #FBF1E6;
  --color-bg-raised:         #FFFFFF;
  --color-bg-surface:        #FFFFFF;
  --color-bg-surface-hover:  #FFF8F0;
  --color-bg-muted:          #F5F0EB;
  --color-bg-inverse:        var(--asfalt-900);

  /* Primair: zomer-oranje als VLAK, altijd met asfalt-tekst */
  --color-primary:           var(--oranje-500);
  --color-primary-bright:    var(--oranje-400);
  --color-primary-dim:       var(--oranje-700);
  --color-primary-soft:      var(--oranje-100);
  --color-primary-glow:      rgba(255, 200, 87, 0.55);
  --color-primary-glow-strong: rgba(255, 107, 53, 0.35);
  --color-link:              var(--oranje-700);
  --color-link-hover:        var(--oranje-800);
  /* De mock-renderer zet tekst-in-primair (actieve tab, tekstknop, link) via deze variabele. Oranje
     als tekst op wit haalt geen AA, dus hier de donkere link-tint. */
  --mock-primary-ink:        var(--color-link);

  /* Accent: zomer-geel (highlight, badges, focus) */
  --color-accent:            var(--geel-400);
  --color-accent-bright:     var(--geel-300);
  --color-accent-soft:       var(--geel-100);
  --color-focus-ring:        var(--geel-400);

  /* Status */
  --color-success:           var(--groen-700);
  --color-success-bg:        var(--groen-50);
  --color-success-border:    var(--groen-200);
  --color-success-fill:      var(--groen-400);
  --color-warning:           var(--geel-600);
  --color-warning-bg:        var(--geel-100);
  --color-warning-border:    var(--geel-400);
  --color-warning-text:      var(--geel-800);
  --color-error:             var(--rood-600);
  --color-error-bg:          var(--rood-50);
  --color-error-border:      var(--rood-200);
  --color-error-text:        var(--rood-700);
  --color-error-soft:        var(--rood-100);
  --color-error-glow:        rgba(180, 35, 24, 0.22);
  --color-danger:            var(--rood-600);
  --color-danger-soft:       var(--rood-50);
  --color-info:              var(--lucht-700);
  --color-info-bg:           var(--lucht-50);
  --color-info-border:       var(--lucht-200);

  /* Tekst */
  --color-text:              var(--asfalt-900);
  --color-text-heading:      var(--asfalt-900);
  --color-text-secondary:    var(--asfalt-600);
  --color-text-muted:        var(--asfalt-500);
  --color-text-on-primary:   var(--asfalt-900);
  --color-text-on-accent:    var(--asfalt-900);
  --color-text-inverse:      #FFFFFF;

  /* Randen. border-strong haalt 3:1 op wit (invoervelden). */
  --color-border:            #E8DFD4;
  --color-border-subtle:     #F1EAE1;
  --color-border-strong:     var(--asfalt-400);
  --color-border-focus:      var(--asfalt-900);
  --color-court-line:        var(--asfalt-900);

  /* Typografie */
  --font-heading: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.3125rem;
  --text-2xl:   1.625rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

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

  /* Spacing (4px-raster) */
  --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-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-10);

  /* Maten */
  --tap-target: 3rem;

  /* Radius: pil-knoppen, kaarten 16px */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Schaduwen: warm getint (asfalt-bruin, niet koud zwart).
     shadow-xl valt naar LINKS: de detail-lade van de mock. */
  --shadow-sm:   0 1px 2px rgba(61, 40, 20, 0.06), 0 2px 8px rgba(61, 40, 20, 0.05);
  --shadow-md:   0 4px 16px rgba(61, 40, 20, 0.09);
  --shadow-lg:   0 10px 30px rgba(61, 40, 20, 0.12);
  --shadow-xl:   -10px 0 36px rgba(61, 40, 20, 0.20);
  --shadow-glow: 0 6px 20px rgba(255, 107, 53, 0.35);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout: mobiel eerst, een smalle kolom leest het best */
  --container-max:     64rem;
  --container-padding: clamp(1rem, 4vw, 1.5rem);
}


/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

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

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

::selection {
  background: var(--geel-300);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-5xl);
  font-weight: 900;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 800;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  max-width: 65ch;
  margin-bottom: var(--space-4);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Coordinaten en tellingen: mono, tabulair */
.mono,
.coord {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.coord {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Kicker: Montserrat in kapitalen met ruime tracking, als een rugnummer */
.kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary-dim);
  margin-bottom: var(--space-3);
}

.text-highlight {
  background: linear-gradient(transparent 60%, var(--geel-300) 60%);
  color: var(--color-text-heading);
  padding: 0 0.1em;
}


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

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section + .section {
  border-top: 2px solid var(--color-border);
}

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

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 55ch;
}

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


/* --------------------------------------------------------------------------
   Veldbelijning: middencirkel als sectie-scheider
   -------------------------------------------------------------------------- */
.court-divider {
  position: relative;
  height: 2.5rem;
  margin: var(--space-8) 0;
  border: none;
}

.court-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--color-court-line);
  opacity: 0.18;
}

.court-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-court-line);
  border-radius: 50%;
  background: var(--color-bg);
  opacity: 0.35;
}

/* Belijnd vlak: een subtiel veld (bv. achter een hero) */
.court-lines {
  position: relative;
  isolation: isolate;
}

.court-lines::before {
  content: '';
  position: absolute;
  inset: var(--space-4);
  z-index: -1;
  border: 2px solid var(--color-court-line);
  border-radius: var(--radius-lg);
  opacity: 0.08;
  background:
    linear-gradient(var(--color-court-line), var(--color-court-line)) center / 2px 100% no-repeat;
}


/* --------------------------------------------------------------------------
   Site Header: asfalt chrome, oranje "&"
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 4px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

/* Middencirkel van het veld, half zichtbaar rechts */
.site-header::after {
  content: '';
  position: absolute;
  right: -3rem;
  top: 50%;
  width: 9rem;
  height: 9rem;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  pointer-events: none;
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.header-logo:hover {
  color: var(--color-text-inverse);
}

.header-logo .logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 1.35rem;
  box-shadow: 0 0 0 3px var(--asfalt-900), 0 0 0 5px var(--color-accent);
}

.header-logo .logo-accent {
  color: var(--color-primary);
}

.header-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--asfalt-300);
  margin-top: var(--space-2);
}


/* --------------------------------------------------------------------------
   Knoppen: pil, oranje met asfalt-tekst, tikdoel >= 48px
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
}

.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

/* Primary: zomer-oranje vlak, asfalt-tekst (5,9:1) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Secondary: wit met asfalt-rand, als een krijtlijn */
.btn-secondary {
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* Danger: baksteenrood, witte tekst (6,6:1) */
.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
}

.btn-danger:hover {
  background-color: var(--rood-700);
  color: var(--color-text-inverse);
}

.btn-danger:active {
  transform: scale(0.98);
}

/* Klein: visueel compacter, tikdoel blijft 44px */
.btn-sm {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn[disabled] {
  background-color: var(--color-bg-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Kaarten: wit, radius 16px, warme schaduw
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Sport-streep bovenaan: zet --card-sport op de kaart */
.card-accent {
  border-top: 4px solid var(--card-sport, var(--color-primary));
}

.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--map-bg);
  overflow: hidden;
}

/* Belijning in de lege foto-plek: middenlijn + middencirkel */
.card-image:not(img)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--map-line), var(--map-line)) center / 2px 100% no-repeat;
}

.card-image:not(img)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--map-line);
  border-radius: 50%;
}

.card-body {
  padding: var(--space-5);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-vendor {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary-dim);
  margin-bottom: var(--space-2);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  color: var(--color-text-heading);
}

.card-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

/* In dit domein: afstand of aantal, geen prijs. Mono, tabulair. */
.card-price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
}

.card-price small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

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

.card-highlighted {
  border: 2px solid var(--color-text);
  box-shadow: 6px 6px 0 var(--color-accent);
}

.card-highlighted:hover {
  box-shadow: 8px 8px 0 var(--color-accent);
}


/* --------------------------------------------------------------------------
   Sport-badges: vlak in de sportkleur, asfalt-inkt
   -------------------------------------------------------------------------- */
.sport-badge {
  --sport: var(--color-accent);
  --sport-ink: var(--color-text-on-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--sport);
  color: var(--sport-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sport-voetbal         { --sport: var(--sport-voetbal);         --sport-ink: var(--sport-voetbal-ink);         --card-sport: var(--sport-voetbal); }
.sport-basketbal       { --sport: var(--sport-basketbal);       --sport-ink: var(--sport-basketbal-ink);       --card-sport: var(--sport-basketbal); }
.sport-tafeltennis     { --sport: var(--sport-tafeltennis);     --sport-ink: var(--sport-tafeltennis-ink);     --card-sport: var(--sport-tafeltennis); }
.sport-tennis          { --sport: var(--sport-tennis);          --sport-ink: var(--sport-tennis-ink);          --card-sport: var(--sport-tennis); }
.sport-beachvolleybal  { --sport: var(--sport-beachvolleybal);  --sport-ink: var(--sport-beachvolleybal-ink);  --card-sport: var(--sport-beachvolleybal); }
.sport-skaten          { --sport: var(--sport-skaten);          --sport-ink: var(--sport-skaten-ink);          --card-sport: var(--sport-skaten); }
.sport-buitenfitness   { --sport: var(--sport-buitenfitness);   --sport-ink: var(--sport-buitenfitness-ink);   --card-sport: var(--sport-buitenfitness); }
.sport-jeu-de-boules   { --sport: var(--sport-jeu-de-boules);   --sport-ink: var(--sport-jeu-de-boules-ink);   --card-sport: var(--sport-jeu-de-boules); }

.sport-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}


/* --------------------------------------------------------------------------
   Kaart: pin-bubbels en popup
   -------------------------------------------------------------------------- */
.map-canvas {
  position: relative;
  min-height: 18rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--map-bg);
  background-image:
    linear-gradient(var(--map-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--map-line) 2px, transparent 2px);
  background-size: 3rem 3rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Echte PDOK-tegels: warmer en gedempter, zodat de pins eruit springen */
.map-canvas .leaflet-tile-pane,
.map-tiles {
  filter: var(--map-tile-filter);
}

.map-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--map-pin-size);
  height: var(--map-pin-size);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--map-pin-bg);
  color: var(--map-pin-text);
  border: 3px solid var(--sport, var(--map-pin-ring));
  box-shadow: var(--shadow-md);
  font-size: 1.2rem;
  line-height: 1;
}

.map-pin > * {
  transform: rotate(45deg);
}

.map-pin.is-active {
  box-shadow: 0 0 0 4px var(--color-focus-ring), var(--shadow-lg);
}

.map-popup {
  background: var(--map-popup-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  max-width: 17rem;
  border-top: 4px solid var(--card-sport, var(--color-primary));
}

.map-popup-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}


/* --------------------------------------------------------------------------
   Meldingen / Alerts: linkerstreep als een zijlijn
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left-width: 6px;
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.alert-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-base);
  margin: 0;
}

.alert-message {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
}

.alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  border-left-color: var(--color-success-fill);
}
.alert-success .alert-title,
.alert-success .alert-message { color: var(--color-success); }

.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  border-left-color: var(--color-accent);
}
.alert-warning .alert-title,
.alert-warning .alert-message { color: var(--color-warning-text); }

.alert-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  border-left-color: var(--color-error);
}
.alert-error .alert-title,
.alert-error .alert-message { color: var(--color-error-text); }

.alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  border-left-color: var(--color-info);
}
.alert-info .alert-title,
.alert-info .alert-message { color: var(--color-info); }


/* --------------------------------------------------------------------------
   Formulier: 16px invoer (geen zoom op iOS), 48px hoog
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-2);
}

.form-control {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.95rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

.form-control:hover {
  border-color: var(--asfalt-500);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 4px var(--color-error-glow);
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231E1E1E' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}

.form-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
}

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

/* Sport-keuze als chips (checkbox achter een label) */
.chip-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-choice label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
}

.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-choice input:checked + span {
  font-weight: 700;
}

.chip-choice label:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-text);
  color: var(--color-text-on-accent);
}

.chip-choice label:has(input:focus-visible) {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-border-focus);
}


/* --------------------------------------------------------------------------
   Stat Panel: telling in mono, asfalt-vlak met oranje lijn
   -------------------------------------------------------------------------- */
.stat-panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

.stat-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.stat-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-value .unit {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Hero: uitnodiging met belijning
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--space-10) 0;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
}

.hero-title .logo-accent {
  color: var(--color-primary-dim);
}

.hero-lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* --------------------------------------------------------------------------
   Swatches (Kleurenpalet)
   -------------------------------------------------------------------------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-3);
}

.swatch {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.swatch-color {
  width: 100%;
  height: 4rem;
}

.swatch-name {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.bg-surface { background-color: var(--color-bg-surface); }
.bg-raised  { background-color: var(--color-bg-raised); }
.bg-inverse { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.text-accent { color: var(--color-primary-dim); }
.text-muted  { color: var(--color-text-muted); }

.divider {
  border: none;
  height: 4px;
  width: 4rem;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin: var(--space-6) 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   Responsive: fluid token-overrides (mobiel is de hoofdmaat)
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.875rem;
    --text-3xl: 1.625rem;
    --text-2xl: 1.375rem;
    --text-xs:  0.8125rem;
    --map-pin-size: 3rem;
  }

  .site-header { padding: var(--space-5) 0 var(--space-4); }
  .header-logo { font-size: var(--text-xl); }

  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .grid,
  .form-row { grid-template-columns: 1fr; }

  .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }

  .hero { padding: var(--space-8) 0; }
}