/* Stitchwise · Licht en koraal · design tokens v2.0.0 (2026-10-03)
   GEGENEREERD door design/maak-tokens.mjs uit design/tokens.json: niet met de hand aanpassen. Specificatie: design/v2/SPEC.md.
   Lettertype: Instrument Sans (lokaal, OFL; design/fonts/fonts.css). Breekpunten = Elementor: tablet >= 768, desktop >= 1025.
   Contrast (WCAG 2.x, gemeten, 46 rollen, 0 fouten): inkt/linnen 13,53; inkt/papier 14,75; inkt/blush 12,57; inkt/nude-licht 11,55; inkt/koraal-licht 11,39; inkt/salie-licht 12,46; inkt/salie 9,22; inkt-zacht/linnen 8,08; inkt-zacht/papier 8,81; inkt-zacht/blush 7,51; inkt-zacht/nude-licht 6,9; inkt-zacht/salie-licht 7,44; inkt-zacht/salie 5,51; steen/linnen 5,94; steen/papier 6,47; steen/blush 5,52; steen/nude-licht 5,07; steen/salie-licht 5,47; koraal-diep/linnen 5,75; koraal-diep/papier 6,27; koraal-diep/blush 5,34; koraal-diep/nude-licht 4,91; koraal-diep/koraal-licht 4,84; koraal-donker/linnen 7,36; inkt/koraal 5,63; inkt/koraal-hover 4,72; wit/inkt 14,75; wit/inkt-zacht 8,81; wit/koraal-diep 6,27; salie-diep/salie-licht 6,18; salie-diep/papier 7,32; salie-diep/linnen 6,71; inkt/linnen 13,53; inkt/salie-licht 12,46; rand-veld/papier 4,2; rand-veld/linnen 3,86; rand-veld/blush 3,58; rand-veld/nude-licht 3,29; rand-veld/salie-licht 3,55; koraal-diep/linnen 5,75; koraal-diep/nude-licht 4,91; inkt/salie 9,22; inkt/papier 14,75; fout/papier 6,57; succes/papier 7,85; let-op/papier 7,2.
   Kleurtoon (OKLCH): geen merkkleur tussen 200 en 290 graden. Verboden: wit op koraal (2,62), steen op salie, koraal-diep op salie. */

:root{
  /* Kleuren (palet v2) */
  --sw-wit:#FFFFFF;
  --sw-linnen:#FAF4F0;
  --sw-papier:#FFFFFF;
  --sw-blush:#F5EBE5;
  --sw-nude-licht:#F0E1D6;
  --sw-nude:#DDBEA9;
  --sw-zand:#EADCD2;
  --sw-koraal:#DC8B79;
  --sw-koraal-hover:#D27A66;
  --sw-koraal-licht:#F6DDD5;
  --sw-koraal-diep:#9E4532;
  --sw-koraal-donker:#85392A;
  --sw-salie:#BBD1CE;
  --sw-salie-licht:#E4EEEC;
  --sw-salie-diep:#3F5C54;
  --sw-inkt:#33251E;
  --sw-inkt-zacht:#574741;
  --sw-steen:#685C53;
  --sw-rand-veld:#87796F;
  --sw-fout:#B42318;
  --sw-succes:#2E5B3A;
  --sw-let-op:#7A4E00;

  /* Rollen (standaard = particulier op linnen; contextklassen hieronder zetten elke rol expliciet) */
  --sw-bg:var(--sw-linnen);
  --sw-bg-kaart:var(--sw-papier);
  --sw-kop:var(--sw-inkt);
  --sw-tekst:var(--sw-inkt-zacht);
  --sw-tekst-zacht:var(--sw-steen);
  --sw-link:var(--sw-koraal-diep);
  --sw-link-hover:var(--sw-koraal-donker);
  --sw-accent:var(--sw-koraal-diep);
  --sw-draad:var(--sw-koraal);
  --sw-vlak:var(--sw-blush);
  --sw-chip:var(--sw-blush);
  --sw-rand:var(--sw-zand);
  --sw-knop-bg:var(--sw-koraal);
  --sw-knop-tekst:var(--sw-inkt);
  --sw-knop-bg-hover:var(--sw-koraal-hover);
  --sw-knop2-rand:var(--sw-inkt);
  --sw-knop2-tekst:var(--sw-inkt);
  --sw-knop2-bg:transparent;
  --sw-knop2-bg-hover:var(--sw-blush);
  --sw-focus:var(--sw-koraal-diep);
  --sw-selectie:var(--sw-koraal-licht);
  --sw-focusring:0 0 0 2px var(--sw-bg),0 0 0 4px var(--sw-focus);

  /* Typografie: Instrument Sans voor alles */
  --sw-font-kop:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --sw-font-tekst:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --sw-lh-display:1.04; --sw-fw-display:400; --sw-ls-display:-0.035em;
  --sw-lh-h1:1.06; --sw-fw-h1:400; --sw-ls-h1:-0.03em;
  --sw-lh-h2:1.1; --sw-fw-h2:400; --sw-ls-h2:-0.028em;
  --sw-lh-h3:1.25; --sw-fw-h3:500; --sw-ls-h3:-0.015em;
  --sw-lh-h4:1.3; --sw-fw-h4:500; --sw-ls-h4:-0.01em;
  --sw-lh-lead:1.55; --sw-fw-lead:400; --sw-ls-lead:0;
  --sw-lh-tekst:1.6; --sw-fw-tekst:400; --sw-ls-tekst:0;
  --sw-lh-klein:1.5; --sw-fw-klein:400; --sw-ls-klein:0;
  --sw-lh-label:1.3; --sw-fw-label:500; --sw-ls-label:0.06em;
  --sw-lh-chip:1.25; --sw-fw-chip:500; --sw-ls-chip:0.05em;
  --sw-lh-knop:1.2; --sw-fw-knop:500; --sw-ls-knop:0.005em;
  --sw-lh-prijs:1.2; --sw-fw-prijs:500; --sw-ls-prijs:0;
  --sw-lh-productnaam:1.3; --sw-fw-productnaam:400; --sw-ls-productnaam:-0.01em;
  --sw-lh-veld:1.4; --sw-fw-veld:400; --sw-ls-veld:0;
  --sw-fs-display:2.625rem;
  --sw-fs-h1:2.375rem;
  --sw-fs-h2:2rem;
  --sw-fs-h3:1.375rem;
  --sw-fs-h4:1.125rem;
  --sw-fs-lead:1.125rem;
  --sw-fs-tekst:1.0625rem;
  --sw-fs-klein:0.875rem;
  --sw-fs-label:0.75rem;
  --sw-fs-chip:0.75rem;
  --sw-fs-knop:1rem;
  --sw-fs-prijs:1.0625rem;
  --sw-fs-productnaam:1.0625rem;
  --sw-fs-veld:1.0625rem;

  /* Ruimte (4-puntsschaal) en raster */
  --sw-ruimte-0:0px;
  --sw-ruimte-1:4px;
  --sw-ruimte-2:8px;
  --sw-ruimte-3:12px;
  --sw-ruimte-4:16px;
  --sw-ruimte-5:24px;
  --sw-ruimte-6:32px;
  --sw-ruimte-7:48px;
  --sw-ruimte-8:64px;
  --sw-ruimte-9:96px;
  --sw-ruimte-10:128px;
  --sw-sectie:56px;
  --sw-gutter:16px;
  --sw-kolomafstand:16px;
  --sw-container:1240px;
  --sw-container-smal:760px;
  --sw-doel-min:44px;
  --sw-knop-min:52px;
  --sw-veld-min:52px;

  /* Radius: één systeem voor particulier en zakelijk (het verschil zit in kleur) */
  --sw-radius-groot:20px;
  --sw-radius-foto:16px;
  --sw-radius-klein:12px;
  --sw-radius-knop:8px;
  --sw-radius-veld:8px;
  --sw-radius-rond:999px;
  --sw-radius:var(--sw-radius-groot);

  /* Schaduwen (warm, op inkt v2) */
  --sw-schaduw-1:0 1px 2px rgba(51,37,30,.05), 0 2px 10px rgba(51,37,30,.04);
  --sw-schaduw-chip:0 2px 12px rgba(51,37,30,.10);
  --sw-schaduw-2:0 4px 12px rgba(51,37,30,.08), 0 12px 32px rgba(51,37,30,.08);
  --sw-schaduw-3:0 12px 40px rgba(51,37,30,.16);

  /* Lijn en draad */
  --sw-haarlijn:1px;
  --sw-draad-dikte:2px;
  --sw-icoon-lijn:1.75;
  --sw-steek:10px 7px;

  /* Beweging */
  --sw-duur-snel:150ms;
  --sw-duur:250ms;
  --sw-duur-traag:600ms;
  --sw-duur-draad:1200ms;
  --sw-ease:cubic-bezier(.22,.61,.36,1);
  --sw-ease-in-uit:cubic-bezier(.65,0,.35,1);
}
@media (min-width:768px){:root{
  --sw-fs-display:3.75rem;
  --sw-fs-h1:3.125rem;
  --sw-fs-h2:2.5rem;
  --sw-fs-h3:1.5rem;
  --sw-fs-h4:1.1875rem;
  --sw-fs-lead:1.1875rem;
  --sw-fs-tekst:1.0625rem;
  --sw-fs-klein:0.875rem;
  --sw-fs-label:0.75rem;
  --sw-fs-chip:0.8125rem;
  --sw-fs-knop:1rem;
  --sw-fs-prijs:1.125rem;
  --sw-fs-productnaam:1.25rem;
  --sw-fs-veld:1.0625rem;
  --sw-sectie:80px; --sw-gutter:32px; --sw-kolomafstand:24px;
}}
@media (min-width:1025px){:root{
  --sw-fs-display:4.75rem;
  --sw-fs-h1:4rem;
  --sw-fs-h2:3.25rem;
  --sw-fs-h3:1.625rem;
  --sw-fs-h4:1.25rem;
  --sw-fs-lead:1.25rem;
  --sw-fs-tekst:1.0625rem;
  --sw-fs-klein:0.9375rem;
  --sw-fs-label:0.8125rem;
  --sw-fs-chip:0.8125rem;
  --sw-fs-knop:1rem;
  --sw-fs-prijs:1.125rem;
  --sw-fs-productnaam:1.25rem;
  --sw-fs-veld:1.0625rem;
  --sw-sectie:112px; --sw-gutter:40px; --sw-kolomafstand:32px;
}}
@media (prefers-reduced-motion:reduce){:root{--sw-duur-snel:0ms;--sw-duur:0ms;--sw-duur-traag:0ms;--sw-duur-draad:0ms}}

/* v1-aliassen, weg in v2.1 (dan grep op build/ en de Elementor-data: 0 treffers). Marine en goudgaren hebben bewust GEEN alias. */
:root{--sw-draadrood:var(--sw-koraal-diep);--sw-draadrood-donker:var(--sw-koraal-donker);--sw-poeder:var(--sw-blush);--sw-radius-b2c:var(--sw-radius-groot);--sw-radius-b2b:var(--sw-radius-groot)}

/* Contexten. Elke context zet ELKE rol expliciet (ook als de waarde gelijk blijft). Zet de klasse op een sectie, pagina-wrapper of body. */
.sw-particulier{--sw-vlak:var(--sw-blush);--sw-chip:var(--sw-blush);--sw-draad:var(--sw-koraal);--sw-accent:var(--sw-koraal-diep);--sw-link:var(--sw-koraal-diep);--sw-link-hover:var(--sw-koraal-donker);--sw-focus:var(--sw-koraal-diep);--sw-kop:var(--sw-inkt);--sw-tekst:var(--sw-inkt-zacht);--sw-tekst-zacht:var(--sw-steen);--sw-rand:var(--sw-zand);--sw-knop-bg:var(--sw-koraal);--sw-knop-tekst:var(--sw-inkt);--sw-knop-bg-hover:var(--sw-koraal-hover);--sw-knop2-rand:var(--sw-inkt);--sw-knop2-tekst:var(--sw-inkt);--sw-knop2-bg:transparent;--sw-knop2-bg-hover:var(--sw-blush);--sw-focusring:0 0 0 2px var(--sw-bg),0 0 0 4px var(--sw-focus)}
.sw-zakelijk{--sw-vlak:var(--sw-salie-licht);--sw-chip:var(--sw-wit);--sw-draad:var(--sw-salie-diep);--sw-accent:var(--sw-salie-diep);--sw-link:var(--sw-salie-diep);--sw-link-hover:var(--sw-inkt);--sw-focus:var(--sw-inkt);--sw-kop:var(--sw-inkt);--sw-tekst:var(--sw-inkt-zacht);--sw-tekst-zacht:var(--sw-steen);--sw-rand:var(--sw-zand);--sw-knop-bg:var(--sw-inkt);--sw-knop-tekst:var(--sw-wit);--sw-knop-bg-hover:var(--sw-inkt-zacht);--sw-knop2-rand:var(--sw-inkt);--sw-knop2-tekst:var(--sw-inkt);--sw-knop2-bg:transparent;--sw-knop2-bg-hover:var(--sw-wit);--sw-focusring:0 0 0 2px var(--sw-bg),0 0 0 4px var(--sw-focus)}
/* Lichte salie (footer): donkere tekst, steen verboden (4,05), focus inkt */
.sw-salie{--sw-bg:var(--sw-salie);--sw-kop:var(--sw-inkt);--sw-tekst:var(--sw-inkt-zacht);--sw-tekst-zacht:var(--sw-inkt-zacht);--sw-link:var(--sw-inkt);--sw-link-hover:var(--sw-inkt);--sw-accent:var(--sw-inkt);--sw-focus:var(--sw-inkt);--sw-rand:rgba(51,37,30,.18);--sw-knop2-rand:var(--sw-inkt);--sw-knop2-tekst:var(--sw-inkt);--sw-knop2-bg:transparent;--sw-focusring:0 0 0 2px var(--sw-bg),0 0 0 4px var(--sw-focus);background:var(--sw-bg);color:var(--sw-tekst)}
/* v1-alias, één release: .sw-donker zet GEEN achtergrond en GEEN lichte tekst meer (veilige no-op = zakelijke rollen). Nergens meer zetten. */
.sw-donker{--sw-kop:var(--sw-inkt);--sw-tekst:var(--sw-inkt-zacht);--sw-tekst-zacht:var(--sw-steen);--sw-link:var(--sw-salie-diep);--sw-focus:var(--sw-inkt);--sw-knop2-rand:var(--sw-inkt);--sw-knop2-tekst:var(--sw-inkt)}
body.sw-zakelijk-pagina{--sw-draad:var(--sw-salie-diep)}

/* Basis (lage specificiteit via :where, Elementor-instellingen winnen) */
:where(body){background:var(--sw-bg);color:var(--sw-tekst);font-family:var(--sw-font-tekst);font-size:var(--sw-fs-tekst);line-height:var(--sw-lh-tekst);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(h1,h2,h3,h4,.sw-display){font-family:var(--sw-font-kop);color:var(--sw-kop);text-wrap:balance;margin:0 0 .45em}
:where(h1){font-size:var(--sw-fs-h1);line-height:var(--sw-lh-h1);font-weight:var(--sw-fw-h1);letter-spacing:var(--sw-ls-h1)}
:where(h2){font-size:var(--sw-fs-h2);line-height:var(--sw-lh-h2);font-weight:var(--sw-fw-h2);letter-spacing:var(--sw-ls-h2)}
:where(h3){font-size:var(--sw-fs-h3);line-height:var(--sw-lh-h3);font-weight:var(--sw-fw-h3);letter-spacing:var(--sw-ls-h3)}
:where(h4){font-size:var(--sw-fs-h4);line-height:var(--sw-lh-h4);font-weight:var(--sw-fw-h4);letter-spacing:var(--sw-ls-h4)}
:where(.sw-display){font-size:var(--sw-fs-display);line-height:var(--sw-lh-display);font-weight:var(--sw-fw-display);letter-spacing:var(--sw-ls-display)}
:where(.sw-lead){font-size:var(--sw-fs-lead);line-height:var(--sw-lh-lead);color:var(--sw-tekst)}
:where(.sw-klein,small){font-size:var(--sw-fs-klein);line-height:var(--sw-lh-klein)}
:where(.sw-label){font-size:var(--sw-fs-label);line-height:var(--sw-lh-label);font-weight:var(--sw-fw-label);letter-spacing:var(--sw-ls-label);text-transform:uppercase;color:var(--sw-kop)}
:where(.sw-zakelijk .sw-label,.sw-label--accent){color:var(--sw-accent)}
:where(.sw-prijs){font-size:var(--sw-fs-prijs);line-height:var(--sw-lh-prijs);font-weight:var(--sw-fw-prijs);font-variant-numeric:tabular-nums;color:var(--sw-koraal-diep)}
:where(em,.sw-accent){font-style:normal;color:var(--sw-accent)}
:where(a){color:var(--sw-link);text-underline-offset:.22em;text-decoration-thickness:1px}
:where(a:hover){color:var(--sw-link-hover)}
:where(.sw-link-steek){text-decoration:underline dashed var(--sw-draad);text-decoration-thickness:2px;text-underline-offset:.28em}
:where(:focus-visible){outline:2px solid var(--sw-focus);outline-offset:3px}
::selection{background:var(--sw-selectie);color:var(--sw-inkt)}

/* Rijgsteek als scheiding (ronde steken via een masker, kleur = --sw-draad; decor) */
:where(.sw-steeklijn){display:block;height:4px;border:0;margin:var(--sw-ruimte-6) 0;background:var(--sw-draad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='4'%3E%3Cline x1='1' y1='2' x2='9' y2='2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/17px 4px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='4'%3E%3Cline x1='1' y1='2' x2='9' y2='2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/17px 4px repeat-x}

/* Knoppen: rechthoekig (radius 8). Primair particulier = koraal met inkt; in .sw-zakelijk = inkt met wit. Secundair = omlijnd inkt, hover blush (zakelijk wit). */
:where(.sw-knop){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:var(--sw-knop-min);padding:.85em 1.45em;border-radius:var(--sw-radius-knop);border:1.5px solid var(--sw-knop-bg);background:var(--sw-knop-bg);color:var(--sw-knop-tekst);font:var(--sw-fw-knop) var(--sw-fs-knop)/var(--sw-lh-knop) var(--sw-font-tekst);letter-spacing:var(--sw-ls-knop);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--sw-duur) var(--sw-ease),border-color var(--sw-duur) var(--sw-ease),transform var(--sw-duur-snel) var(--sw-ease)}
:where(.sw-knop:hover){background:var(--sw-knop-bg-hover);border-color:var(--sw-knop-bg-hover);color:var(--sw-knop-tekst)}
:where(.sw-knop:active){transform:translateY(1px)}
:where(.sw-knop--secundair){background:var(--sw-knop2-bg);border-color:var(--sw-knop2-rand);color:var(--sw-knop2-tekst)}
:where(.sw-knop--secundair:hover){background:var(--sw-knop2-bg-hover);border-color:var(--sw-knop2-rand);color:var(--sw-knop2-tekst)}
@media (max-width:480px){:where(.sw-knoppen>.sw-knop){width:100%}}

/* Kaart, vlak en ringkader */
:where(.sw-kaart){background:var(--sw-bg-kaart);border:1px solid var(--sw-rand);border-radius:var(--sw-radius-groot)}
:where(.sw-vlak){background:var(--sw-vlak);border-radius:var(--sw-radius-groot)}
:where(.sw-ring){aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px var(--sw-papier),0 0 0 8px var(--sw-nude)}

/* Velden: wit, rand rand-veld (3,86 tot 4,20), radius 8, min. 52 px; focus = outline koraal-diep (zakelijk inkt), de rand blijft.
   Specificiteit bewust NET boven Hello reset.css (select/textarea 0,0,1; input[type=text] 0,1,1; select:focus 0,1,1; input[type=text]:focus 0,2,1),
   dus niet in :where(): body select/textarea 0,0,2, body .sw-veld 0,1,1, body input:not(lijst) 0,1,2 (een :not-lijst telt als één attribuut).
   De Elementor-kit (.elementor-kit-N input 0,3,1), Elementor-formulieren (.elementor-field-textual 0,2,0), WooCommerce (.woocommerce form .form-row) en de lanes (shop.css, configurator.css, paginas.css) winnen nog altijd. */
body .sw-veld,body input:not([type=checkbox],[type=radio],[type=submit],[type=button],[type=reset],[type=image],[type=hidden],[type=file],[type=range],[type=color]),body select,body textarea{box-sizing:border-box;min-height:var(--sw-veld-min);border:1px solid var(--sw-rand-veld);border-radius:var(--sw-radius-veld);background:var(--sw-papier);color:var(--sw-inkt);font:var(--sw-fw-veld) var(--sw-fs-veld)/var(--sw-lh-veld) var(--sw-font-tekst)}
body .sw-veld:focus,body input:not([type=checkbox],[type=radio],[type=submit],[type=button],[type=reset],[type=image],[type=hidden],[type=file],[type=range],[type=color]):focus,body select:focus,body textarea:focus{border-color:var(--sw-rand-veld)}
:where(.sw-veld,input,select,textarea)::placeholder{color:var(--sw-steen);opacity:1}
:where(.sw-veld,input,select,textarea):focus-visible{outline:2px solid var(--sw-focus);outline-offset:1px}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--sw-koraal-diep)}
:where(.sw-zakelijk) :where(input[type=checkbox],input[type=radio]){accent-color:var(--sw-inkt)}