/* ═══════════════════════════════════════════════════════════════════════════
   BestSnowResorts — design tokens (bron van waarheid voor kleur/vorm/ruimte)

   Alleen :root-variabelen — geen selectors, resets of componenten; het laden
   van dit bestand is visueel effectloos tot een pagina de variabelen gebruikt.
   Waarden en semantiek: docs/design/BESTSNOWRESORTS_STYLE_GUIDE.md §3–§7;
   migratieplan: docs/design/BESTSNOWRESORTS_DESIGN_TOKENS_PROPOSAL.md.

   ⚠️ Wijzigen = ?v= bumpen op ÁLLE pagina's die dit laden (immutable cache).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Merk & tinten ── */
  --bsr-teal:         #134f5c;
  --bsr-teal-dark:    #0f4450;
  --bsr-ink:          #173640;
  --bsr-ink-strong:   #143c47;
  --bsr-glacier:      #1a91c4;
  --bsr-glacier-ink:  #1683af;
  --bsr-muted:        #5b7780;   /* lichtste toegestane teksttint op wit (≥4.5:1) */
  --bsr-muted-soft:   #6f8991;   /* alleen ≥17px of decoratief */
  --bsr-tint:         #f0f7f8;
  --bsr-page:         #f8f9fa;
  --bsr-white:        #ffffff;

  /* ── Accenten & status ── */
  --bsr-gold:         #c9a84c;   /* partner / merkaccent */
  --bsr-gold-data:    #ab7d1c;   /* sneeuwcijfers op wit, alleen ≥19px/vet */
  --bsr-orange:       #e08a3c;   /* verblijven-laag / uitgelicht */
  --bsr-orange-ink:   #a35f12;
  --bsr-success:      #16a34a;
  --bsr-error:        #b91c1c;
  --bsr-live:         #e8506b;   /* last-minute / urgentie */

  /* ── Lijnen & vlakken ── */
  --bsr-line:         rgba(19, 79, 92, 0.10);
  --bsr-line-soft:    rgba(19, 79, 92, 0.07);
  --bsr-line-strong:  #d1dfe3;
  --bsr-surface:      rgba(255, 255, 255, 0.95);
  --bsr-surface-soft: rgba(255, 255, 255, 0.82);

  /* ── Kaartlagen (referentie; paint zit in JS tot migratiefase 4) ── */
  --bsr-map-area-label: #2b4969;
  --bsr-map-area-dot:   #032d77;
  --bsr-map-village:    #1a91c4;
  --bsr-map-village-ink:#1577a0;
  --bsr-map-stay:       #e08a3c;

  /* ── Radius ── */
  --bsr-pill:         999px;
  --bsr-radius-lg:    28px;
  --bsr-radius-md:    20px;
  --bsr-radius-sm:    16px;
  --bsr-radius-menu:  12px;
  --bsr-radius-input: 10px;
  --bsr-radius-xs:    8px;

  /* ── Schaduw ── */
  --bsr-shadow-card:  0 18px 50px rgba(17, 52, 64, 0.10);
  --bsr-shadow-soft:  0 12px 30px rgba(19, 79, 92, 0.10);
  --bsr-shadow-pop:   0 8px 24px rgba(19, 79, 92, 0.14);

  /* ── Typografie & beweging ── */
  --bsr-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bsr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Spacing (even reeks; gids §5) ── */
  --bsr-s2: 2px;  --bsr-s4: 4px;   --bsr-s6: 6px;   --bsr-s8: 8px;
  --bsr-s10: 10px; --bsr-s12: 12px; --bsr-s14: 14px; --bsr-s16: 16px;
  --bsr-s20: 20px; --bsr-s24: 24px; --bsr-s28: 28px; --bsr-s36: 36px;
  --bsr-s48: 48px;

  /* ── Semantische aliassen ── */
  --bsr-text:              var(--bsr-ink);
  --bsr-text-strong:       var(--bsr-ink-strong);
  --bsr-text-muted:        var(--bsr-muted);
  --bsr-text-inverse:      var(--bsr-white);
  --bsr-heading:           var(--bsr-teal);
  --bsr-bg:                var(--bsr-page);
  --bsr-bg-card:           var(--bsr-white);
  --bsr-bg-tint:           var(--bsr-tint);
  --bsr-border:            var(--bsr-line);
  --bsr-border-input:      var(--bsr-line-strong);
  --bsr-interactive:       var(--bsr-teal);
  --bsr-interactive-hover: var(--bsr-teal-dark);
  --bsr-accent:            var(--bsr-glacier);
  --bsr-selected:          var(--bsr-gold);
  --bsr-partner:           var(--bsr-gold);
  --bsr-focus-ring:        rgba(26, 145, 196, 0.45);
}