/* ==========================================================================
   Werk en Mantelzorg Tour: ontwerptokens
   Eigen waarden, geen Automatic.css. Opzet zoals het Coach Amigo-thema (tokens.css + base.css).
   Kleuren: paars #6E2472 en groen #ACCA41 uit het logo en de bus. Tinten op dezelfde manier als
   Site > Kleuren: gelijke tint en verzadiging, lichtheid 95/85/65/35/25/10.
   Licht en donker (sinds 1.9.0): vlakken, tekst en koppen via light-dark(); de schakelaar in de header
   wisselt (assets/js/color-scheme.js), standaard volgt de site de systeeminstelling. Merkkleuren blijven gelijk.
   Maten vloeiend van 360 tot 1366 px. Corps en knoppen afgestemd op mantelzorg.nl (gemeten 02-11-2026:
   tekst 18 px / 1,4, knop 18 px SemiBold, 12 x 32 px, radius 8 px, groen met donkerpaarse tekst);
   koppen bewust zwaarder (ExtraBold zoals het logo) als eigen schwung.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Kleuren: paars (primair) */
  --primary: #6E2472;
  --primary-hover: #541b57;
  --primary-ultra-light: #f8ecf9;
  --primary-light: #ebc5ed;
  --primary-semi-light: #cf77d4;
  --primary-semi-dark: #832b88;
  --primary-dark: #5e1f61;
  --primary-ultra-dark: #250c27;

  /* Kleuren: groen (secundair) */
  --secondary: #ACCA41;
  --secondary-hover: #98b532;
  --secondary-ultra-light: #f6f9eb;
  --secondary-light: #e5eec3;
  --secondary-semi-light: #c2d873;
  --secondary-semi-dark: #768c27;
  --secondary-dark: #54641c;
  --secondary-ultra-dark: #22280b;

  /* Tertiair: geen derde merkkleur; verwijst naar groen zodat blokken en theme.json blijven werken. */
  --tertiary: var(--secondary);
  --tertiary-hover: var(--secondary-hover);
  --tertiary-ultra-light: var(--secondary-ultra-light);
  --tertiary-light: var(--secondary-light);
  --tertiary-semi-light: var(--secondary-semi-light);
  --tertiary-semi-dark: var(--secondary-semi-dark);
  --tertiary-dark: var(--secondary-dark);
  --tertiary-ultra-dark: var(--secondary-ultra-dark);

  /* Accent: framboos (tint 330, uit de paarse familie), voor foutmeldingen. Rustiger dan rood, past bij paars en groen.
     Aan te passen zonder thema-upload in Site > Kleuren (familie Accent). */
  --accent: #a3326a;
  --accent-hover: #bb397a;
  --accent-ultra-light: #f9ebf2;
  --accent-light: #edc4d9;
  --accent-semi-light: #d576a5;
  --accent-semi-dark: #892a59;
  --accent-dark: #621e3f;
  --accent-ultra-dark: #270c19;

  /* Grijs */
  --base: #9c9c9c;
  --base-hover: #b3b3b3;
  --base-ultra-light: #f5f5f5;
  --base-light: #d6d6d6;
  --base-semi-light: #a6a6a6;
  --base-semi-dark: #6b6b6b;
  --base-dark: #404040;
  --base-ultra-dark: #2b2b2b;
  --neutral: #2b2b2b;
  --neutral-hover: #404040;
  --neutral-ultra-light: #f5f5f5;
  --neutral-light: #d6d6d6;
  --neutral-semi-light: #a6a6a6;
  --neutral-semi-dark: #6b6b6b;
  --neutral-dark: #404040;
  --neutral-ultra-dark: #1a1a1a;

  --danger: var(--accent);
  --danger-light: var(--accent-light);
  --danger-ultra-light: var(--accent-ultra-light);
  --success: var(--secondary-semi-dark);
  --white: #fff;
  --black: #000;
  --text-dark: #2b2b2b;
  --text-light: #fff;
  /* Licht | donker (nacht in aubergine). Donker: tekst en koppen licht, vlakken van donker naar iets lichter. */
  --paars-licht: #e2b9e5;  /* koppen en links in donker */
  --text-color: light-dark(var(--text-dark), #ece4ee);
  --text-dark-muted: light-dark(#6b6b6b, #b8a8bc);
  --heading-color: light-dark(var(--primary), var(--paars-licht));
  --heading-color-hover: light-dark(var(--primary-semi-dark), #f3dcf5);
  --link-color: light-dark(var(--primary), var(--paars-licht));
  --link-color-hover: light-dark(var(--primary-hover), #f3dcf5);
  --bg-body: light-dark(var(--white), #17101b);
  --bg-lucht: light-dark(#FAF7FA, #1f1524);  /* lucht van de hero-animatie: header, hero, footer en secties met wenm-sectie--lucht */
  --bg-kaart: light-dark(var(--white), #2a1d30);  /* witte kaarten, menukaart, formuliervelden */
  --bg-lila: light-dark(var(--primary-ultra-light), #241829);
  --bg-groen: light-dark(var(--secondary-ultra-light), #1c2014);
  --logo-paars: light-dark(#742672, var(--white));  /* letters WERK EN MANTELZORG van het logo: paars, in donker wit (header, footer, hero-intro) */
  --white-trans-50: color-mix(in oklch, var(--white) 50%, transparent);
  --white-trans-80: color-mix(in oklch, var(--white) 80%, transparent);
  --black-trans-10: color-mix(in oklch, var(--black) 10%, transparent);
  --black-trans-20: color-mix(in oklch, var(--black) 20%, transparent);
  --secondary-light-trans-90: color-mix(in oklch, var(--secondary-light) 90%, transparent);

  /* Afstanden (vloeiend 360 > 1366 px) */
  --space-xs: 0.8438rem;  /* 13.5 px */
  --space-s: clamp(1.125rem, calc(0.1988vw + 1.0803rem), 1.25rem);  /* 18 > 20 px */
  --space-m: clamp(1.5rem, calc(0.5964vw + 1.3658rem), 1.875rem);  /* 24 > 30 px */
  --space-l: clamp(2rem, calc(1.2922vw + 1.7092rem), 2.812rem);  /* 32 > 45 px */
  --space-xl: clamp(2.665rem, calc(2.4712vw + 2.1090rem), 4.219rem);  /* 42.6 > 67.5 px */
  --space-xxl: clamp(3.553rem, calc(4.4145vw + 2.5592rem), 6.328rem);  /* 56.8 > 101 px */
  --section-space-xs: clamp(1.688rem, calc(1.2922vw + 1.3967rem), 2.5rem);  /* 27 > 40 px */
  --section-space-s: clamp(2.25rem, calc(2.3857vw + 1.7132rem), 3.75rem);  /* 36 > 60 px */
  --section-space-m: clamp(3rem, calc(4.1750vw + 2.0606rem), 5.625rem);  /* 48 > 90 px */
  --section-space-l: clamp(4rem, calc(7.0577vw + 2.4120rem), 8.438rem);  /* 64 > 135 px */
  --section-space-xl: clamp(5.331rem, calc(11.6511vw + 2.7091rem), 12.66rem);  /* 85 > 202 px */
  --gutter: clamp(1rem, calc(3.9761vw + 0.1054rem), 3.75rem);  /* 16 > 60 px */

  /* Lettergrootten */
  --text-xs: 0.75rem;  /* 12 px */
  --text-s: clamp(0.8125rem, calc(0.0994vw + 0.7901rem), 0.875rem);  /* 13 > 14 px */
  --text-m: clamp(1rem, calc(0.1988vw + 0.9553rem), 1.125rem);  /* 16 > 18 px, gelijk aan mantelzorg.nl */
  --text-l: clamp(1.125rem, calc(0.5964vw + 0.9908rem), 1.5rem);  /* 18 > 24 px */
  --text-xl: clamp(1.5rem, calc(1.1928vw + 1.2316rem), 2.25rem);  /* 24 > 36 px */
  --text-xxl: clamp(1.75rem, calc(1.3917vw + 1.4369rem), 2.625rem);  /* 28 > 42 px */
  --h1: clamp(2.25rem, calc(1.9881vw + 1.8027rem), 3.5rem);  /* 36 > 56 px */
  --h2: clamp(1.75rem, calc(1.1928vw + 1.4816rem), 2.5rem);  /* 28 > 40 px, mantelzorg.nl 40 px */
  --h3: clamp(1.375rem, calc(0.5964vw + 1.2408rem), 1.75rem);  /* 22 > 28 px */
  --h4: clamp(1.25rem, calc(0.3976vw + 1.1605rem), 1.5rem);  /* 20 > 24 px, mantelzorg.nl 24 px */
  --h5: clamp(1.0625rem, calc(0.497vw + 0.9507rem), 1.375rem);  /* 17 > 22 px */
  --h6: clamp(1rem, calc(0.3976vw + 0.9105rem), 1.25rem);  /* 16 > 20 px */

  /* Typografie: Raleway, één familie. Koppen ExtraBold zoals het logo, lopende tekst Regular. */
  --text-font-family: raleway, system-ui, sans-serif;
  --heading-font-family: raleway, system-ui, sans-serif;
  --text-font-weight: 400;
  --heading-font-weight: 800;
  --h1-font-weight: 800;
  --h2-font-weight: 800;
  --h3-font-weight: 700;
  --h4-font-weight: 600;
  --h5-font-weight: 700;
  --h6-font-weight: 700;
  --text-line-height: 1.5;  /* mantelzorg.nl 1,4; iets ruimer voor lange alinea's */
  --heading-line-height: 1.15;
  --h1-line-height: 1.1;
  --text-letter-spacing: 0;
  --heading-letter-spacing: -0.01em;
  --h3-letter-spacing: 0;
  --paragraph-spacing: 1em;
  --list-spacing: var(--paragraph-spacing);
  --list-item-spacing: 0.5em;
  --list-indent-spacing: 1.5em;
  --heading-spacing: 1.2em;

  /* Maten */
  --content-width: 85.375rem;  /* 1366 px */
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --width-s: calc(var(--content-width) * 0.2);
  --width-m: calc(var(--content-width) * 0.4);
  --width-l: calc(var(--content-width) * 0.6);
  --width-xl: calc(var(--content-width) * 0.8);
  --content-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --grid-gap: var(--space-m);
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --header-height: 4.5rem;
  --scroll-margin: calc(var(--header-height) + var(--space-s));

  /* Radius: knoppen 8 px en vlakken 16 px zoals mantelzorg.nl; de bordjes zelf blijven hoekig */
  --radius-xs: 2px;
  --radius-s: 3px;
  --radius: 4px;
  --radius-m: 4px;
  --radius-l: 8px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-50: 50%;
  --radius-circle: 50vw;

  /* Knoppen: zoals mantelzorg.nl (groen met donkerpaarse tekst; paarse variant met witte tekst in wenm.css) */
  --btn-background: var(--secondary);
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: #421645;
  --btn-text-color-hover: #421645;
  --btn-border-color: var(--secondary);
  --btn-border-color-hover: var(--secondary-hover);
  --btn-border-width: 0;
  --btn-border-style: solid;
  --btn-border-radius: var(--radius-l);
  --btn-padding-block: 0.667em;   /* 12 px bij 18 px */
  --btn-padding-inline: 1.778em;  /* 32 px bij 18 px */
  --btn-min-width: 7rem;
  --btn-line-height: 1.1;
  --btn-font-weight: 600;
  --btn-font-size: var(--text-m);
  --btn-letter-spacing: normal;
  --btn-text-transform: none;
  --btn-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;

  /* Overig */
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition: background-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing);
  --box-shadow-m: 0 0 40px rgb(0 0 0 / 0.1);
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;
}