/* =========================================================
   Snowboots.nl — design tokens (Atelier, 1:1 uit tokens.css)

   Palet uit het logo: een berg in een verloop van cyaan naar blauw.
   Het accent is bewust de dónkere kant van dat verloop. --c-accent is
   tegelijk achtergrond met witte tekst (.dk-badge--best) én tekstkleur van
   labels van 10,5–13px, dus het moet in beide rollen contrast halen:
     #0e5488 op wit         = 7,95:1
     #0e5488 op het paneel  = 6,45:1
     wit op #0e5488         = 7,95:1
   Het cyaan uit het logo (#16b9c4) haalt circa 2,3:1 en is daarom
   uitsluitend decoratief — nooit als tekstkleur gebruiken.

   Paneeltint: koel ijsblauw-grijs, past bij de winterfotografie en bij het
   logo. Schaduwen zijn koel getint (blauwgrijs) in plaats van de warme
   bruintint van douchekraan.
   ========================================================= */
:root {
  --c-ink: #1a1a1a; --c-ink-hover: #2b2b2b; --c-paper: #f6f8f9; --c-white: #ffffff; --c-input: #f1f4f6;
  /* paneeltint snowboots.nl */
  --c-panel: #dfe9ef; --c-panel-dark: #c8d9e2; --c-panel-light: #eef4f7; --c-panel-text: #4e6875; --c-panel-ink: #33505d; --c-panel-avatar: #a8c2d0;
  --c-text: #1a1a1a; --c-text-prose: #33393d; --c-text-2: #414a4f; --c-text-3: #4c5459; --c-meta: #5f686d; --c-meta-2: #687176; /* 10 sept 2026 (audit B3): was #6f787d/#7e878c, 3,66:1 op paneel/wit */
  --c-line: rgba(0,0,0,.06); --c-line-2: rgba(0,0,0,.08); --c-line-input: rgba(0,0,0,.1); --c-check: #b9c6ce;
  --c-accent: #0e5488; --c-success: #2f8f5b; --c-warning: #b8860b; --c-error: #c9432b; --c-error-bg: #fff7f5;
  /* decoratief, nooit tekst: het cyaan uit het logoverloop */
  --c-accent-soft: #16b9c4;
  --f-head: 'Manrope', sans-serif; --f-body: 'Instrument Sans', system-ui, sans-serif; --f-mono: ui-monospace, Menlo, monospace;
  --fs-h1: 60px; --lh-h1: 1.0; --ls-h1: -.035em; --fs-h1-page: 46px; --lh-h1-page: 1.05; --fs-h1-long: 54px; --lh-h1-long: 1.02;
  --fs-h2: 34px; --lh-h2: 1.1; --ls-h2: -.03em; --fs-h2-sm: 28px; --fs-h3: 22px; --ls-h3: -.02em;
  --fs-card-title: 17px; --fs-card-title-lg: 19px; --fs-body: 15px; --lh-body: 1.5; --fs-prose: 16.5px; --lh-prose: 1.65; --fs-intro: 17px; --lh-intro: 1.55;
  --fs-meta: 13px; --fs-label: 12.5px; --ls-label: .08em; --fs-price: 24px; --fs-price-lg: 40px; --fs-price-sm: 18px; --fs-score: 14px; --fs-score-lg: 20px; --fs-score-xl: 30px;
  --pad-x: 48px; --pad-x-m: 20px; --sec: 64px; --sec-m: 40px; --gap: 20px; --gap-m: 12px; --card-pad: 14px; --card-pad-text: 18px; --panel-pad: 56px; --panel-pad-m: 20px;
  --w-container: 1440px; --w-read: 760px; --w-sidebar: 340px; --w-filters: 272px; --w-gallery: 600px; --w-mobile: 390px;
  --r-panel: 28px; --r-card: 22px; --r-card-sm: 20px; --r-img: 16px; --r-md: 14px; --r-sm: 10px; --r-xs: 8px; --r-pill: 999px;
  --sh-float: 0 12px 32px rgba(20,45,65,.09); --sh-pop: 0 18px 44px rgba(20,45,65,.17); --sh-soft: 0 12px 32px rgba(20,45,65,.11); --sh-search: 0 8px 24px rgba(20,45,65,.09); --sh-sticky: 0 14px 36px rgba(0,0,0,.18); --sh-dark: 0 12px 32px rgba(0,0,0,.28); --sh-btn-hover: 0 8px 20px rgba(0,0,0,.18);
  --btn-h-hero: 54px; --btn-h: 48px; --btn-h-list: 46px; --btn-h-table: 42px; --btn-h-sm: 40px; --input-h: 50px; --chip-pad: 7px 14px; --check: 18px; --tap-min: 44px;
}
@media (max-width: 767px) {
  :root { --fs-h1: 36px; --lh-h1: 1.02; --ls-h1: -.03em; --fs-h1-page: 34px; --fs-h1-long: 34px; --fs-h2: 27px; --fs-h2-sm: 24px; --fs-h3: 19px; --fs-body: 16px; --fs-prose: 15.5px; --lh-prose: 1.6; --fs-intro: 15px; --fs-price: 18px; --fs-price-lg: 36px; --pad-x: var(--pad-x-m); --sec: var(--sec-m); --gap: var(--gap-m); --r-panel: 26px; --r-card: 18px; --r-img: 12px; }
}
@media (min-width: 768px) and (max-width: 1199px) { :root { --pad-x: 32px; --w-sidebar: 300px; } }