/*
 * Ontwerpwaarden. Eén plek voor kleur, ruimte en typografie.
 * Alle contrastverhoudingen zijn getoetst tegen WCAG 2.2 AA.
 */

:root {
  /* Merk. Uit het bestaande thema van de webshop. */
  --bsv-black: #111;
  --bsv-black-2: #1d1d1d;
  --bsv-on-black: #fff;    /* tekst op een zwart vlak; 18,9:1 op --bsv-black */
  --bsv-yellow: #fdd800;
  --bsv-yellow-dark: #e3c200;

  /* Geel als tekstkleur op wit. Het merkgeel haalt daar 1,4:1 en is dus
     onleesbaar; ook de #b98700 die .business-eyebrow als terugval gebruikte
     bleef op 3,2:1 steken. Deze haalt 5,3:1 en is daarmee bruikbaar voor
     kleine tekst. Nooit --bsv-yellow gebruiken voor letters op een licht vlak. */
  --bsv-yellow-strong: #8a6500;

  /* Status. Losgekoppeld van de merkkleuren, zodat rood niet twee dingen betekent. */
  --bsv-sale: #c81010;      /* actielabel en korting */
  --bsv-error: #b00020;     /* foutmelding */
  --bsv-success: #1d7a1d;   /* voorraad, bevestiging */
  --bsv-success-soft: #e8f4eb;
  --bsv-success-line: #1d7a1d;   /* rand; 4,8:1 op success-soft */
  --bsv-success-strong: #146014; /* tekst op success-soft; 6,9:1 */
  --bsv-warning: #8a5a00;   /* allergenen, let op */
  --bsv-warning-strong: #603d00;
  --bsv-warning-line: #a97400; /* rand; 4,1:1 op wit en 3,9:1 op warning-soft */
  --bsv-warning-soft: #fff9e8;
  --bsv-warning-mark: #fff3c4; /* vlak achter een allergeen dat het product bevat */
  --bsv-info: var(--bsv-body); /* neutrale toelichting en links */
  --bsv-info-soft: var(--bsv-bg); /* rustig vlak voor informatieve meldingen */
  --bsv-error-soft: #fdecef; /* 6,4:1 voor --bsv-error, 15,9:1 voor --bsv-ink */
  --bsv-line-hover: #9c9c9c; /* rand bij aanwijzen; 2,8:1 op wit. De rustrand
                                --bsv-line is de bepalende voor 1.4.11; deze mag
                                niet lichter dan de rust worden. */
  --bsv-star: #9a6600;      /* sterren; 4,9:1 op wit, donkerder dan goud moet */

  /* Dieetbolletjes. Wit erop, dus allemaal boven 4,5:1. Ze stonden los in
     components.css, waardoor --veg stilzwijgend uit de pas kon gaan lopen met
     --bsv-success terwijl het dezelfde kleur is. */
  --bsv-diet-veg: var(--bsv-success);   /* 5,5:1 */
  --bsv-diet-vegan: #0e6b32;            /* 6,6:1 */
  --bsv-diet-gf: #6a4e92;               /* 6,7:1 */
  --bsv-diet-lf: #a8630f;               /* 4,7:1 */
  --bsv-diet-protein: #2f6b48;          /* 6,3:1 */

  /* Tekst en vlak. */
  --bsv-ink: #161616;       /* koppen; 15,9:1 op wit */
  --bsv-body: #3a3a3a;      /* lopende tekst; 10,4:1 */
  --bsv-muted: #5e5e5e;     /* bijschrift; 6,4:1, niet lichter maken */
  --bsv-label: #737373;     /* veldlabel in de kassa; 4,7:1 op wit.
                               Lichter dan --bsv-muted omdat een zwevend label
                               anders leest als een ingevulde waarde. Dit is de
                               ondergrens: WCAG vraagt 4,5:1 voor tekst en een
                               label is tekst, geen versiering. Niet verder
                               oplichten. */
  --bsv-input-line: #858585; /* inputrand; 3,69:1 op wit, 3,42:1 op --bsv-bg */
  --bsv-line: #dedede;
  --bsv-line-soft: #ededed;
  --bsv-bg: #f6f6f6;
  --bsv-surface: #fff;

  /* Accenten. Amber voor voedingswaarden, bosgroen voor de brede promotievlakken. */
  --bsv-highlight: #fff7cc;
  --bsv-highlight-ink: #6c5b00; /* 6,2:1 op highlight */
  --bsv-forest: #1c3025;
  --bsv-forest-2: #314d39;

  /* Focus. Geel op donker, antraciet op licht. */
  --bsv-focus: var(--bsv-ink);
  --bsv-focus-dark: var(--bsv-yellow);

  /* Ruimte. Dicht op elkaar, zoals een winkel hoort te zijn. */
  --bsv-space-1: 4px;
  --bsv-space-2: 8px;
  --bsv-space-3: 12px;
  --bsv-space-4: 16px;
  --bsv-space-5: 24px;
  --bsv-space-6: 32px;
  --bsv-space-7: 48px;

  /* Vorm. Bewust terughoudend: winkels zijn rechthoekig. */
  --bsv-radius-sm: 5px;
  --bsv-radius: 8px;
  --bsv-radius-lg: 12px;
  --bsv-radius-pill: 999px;

  /* Schaduw. Alleen bij aanwijzen, nooit als versiering. */
  --bsv-shadow-hover: 0 6px 20px rgb(0 0 0 / 8%);
  --bsv-shadow-bar: 0 -4px 20px rgb(0 0 0 / 20%);

  /* Typografie. */
  --bsv-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  --bsv-fs-xs: 0.7188rem;
  --bsv-fs-sm: 0.8125rem;
  --bsv-fs-base: 0.9375rem;

  /* Lopende tekst: schaalt mee met de lettergrootte van de bezoeker. */
  --bsv-fs-copy: 1.0625rem;
  --bsv-lh-copy: 1.6;

  /* Tekst in invoervelden op een aanraakscherm. Safari op iOS zoomt in op elk
     veld met minder dan 16 px, en dan staat de pagina scheef tot de klant
     terugknijpt. Zie base.css. */
  --bsv-fs-input: 1rem;
  --bsv-fs-md: 1.0625rem;
  --bsv-fs-lg: 1.375rem;
  --bsv-fs-xl: 1.8125rem;

  /* Raster. */
  --bsv-wrap: 1264px;
  --bsv-gutter: 16px;

  /* Kop. De kop plakt bovenaan, dus alles wat eronderlangs schuift moet weten
     hoe hoog hij is: de sprong naar een anker, de filterbalk op het overzicht
     en de categoriebalk zelf. layout.css schrijft --bsv-mast-h op mobiel om. */
  --bsv-mast-h: 68px;   /* rij met logo, zoekbalk en knoppen */
  --bsv-nav-h: 50px;    /* categoriebalk eronder */
  --bsv-header-h: calc(var(--bsv-mast-h) + var(--bsv-nav-h));

  /* Aanraakvlak. WCAG 2.2 eist minimaal 24, wij houden 44 aan. */
  --bsv-touch: 44px;
}