/*
 * Design tokens, gedeeld door alle winkels. Kleuren per winkel staan in shop-<id>.css
 * (geladen via templates/_partials/stylesheets.tpl) en overschrijven alleen variabelen.
 * Alleen breed ondersteunde CSS (iOS Safari 15+): geen :has() voor layout, geen
 * container queries, geen backdrop-filter, geen color-mix(). Animaties alleen op
 * transform/opacity en met prefers-reduced-motion.
 */
:root {
  --cs-font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cs-font-head: 'Bricolage Grotesque', 'Trebuchet MS', 'Segoe UI', sans-serif;

  /* Merk (Alopsys als basis, winkels overschrijven) */
  --cs-brand: #0b3055;
  --cs-on-brand: #ffffff;
  --cs-brand-text: #0b3055;
  --cs-accent: #77bedb;
  --cs-soft: #e4f1f7;
  --cs-ground: #f5f1ed;
  --cs-surface: #ffffff;
  --cs-ink: #0b3055;
  --cs-muted: #56606d;
  --cs-line: #e2d9d0;
  --cs-top: #0b3055;
  --cs-on-top: #ffffff;
  --cs-foot: #071f38;
  --cs-on-foot: #e6edf4;
  --cs-cta: #109e08;
  --cs-on-cta: #ffffff;
  --cs-cta-hover: #0c8506;
  --cs-promo: #ff9a52;
  --cs-success: #1f7a3a;
  --cs-danger: #b42318;

  --cs-radius-sm: 6px;
  --cs-radius: 10px;
  --cs-radius-lg: 14px;
  --cs-gap: 16px;
  --cs-container: 1320px;
  --cs-tap: 44px;
  --cs-header-h: 76px;
  --cs-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

  /* Bootstrap 5 van Hummingbird op de tokens zetten */
  --bs-body-font-family: var(--cs-font-body);
  --bs-body-color: var(--cs-ink);
  --bs-body-bg: var(--cs-ground);
  --bs-primary: var(--cs-brand);
  --bs-link-color: var(--cs-brand-text);
  --bs-link-hover-color: var(--cs-ink);
  --bs-border-color: var(--cs-line);
  --bs-border-radius: var(--cs-radius);
  --bs-heading-color: var(--cs-ink);
}