/*
 * goudlaatje.nl — tokens.css
 * Kopie van brand/starterkit/goudlaatje-tokens.css (Starterkit v1.3, brandbook v1.3,
 * 23-10-2026; basis uit Brandassets v1.1). Enige aanpassing: de drie @font-face-bronnen wijzen naar zelf gehoste woff2-
 * bestanden (latin-subset, omgezet uit de meegeleverde ttf's; Lora als statisch 600-exemplaar).
 * Alle kleur-, maat- en afstandswaarden van de website komen uit dit bestand.
 */
/*
 * Goudlaatje — ontwerptokens en basisklassen, versie 1.3 (23-10-2026)
 * v1.3: palet rond groen, crème en goud (champagne, warm zand, brons, goudlijn, lichtgoud op groen),
 *       neutrale daling-kleur, ronde kaarten (Picnic-achtige eenvoud). Terracotta, kastanje en perzik
 *       alleen nog als accent binnen het component Rekenvoorbeelden.
 * v1.2: warm secundair palet (terracotta, kastanje, perzik, lichtgoud) en bewegingstokens.
 * v1.0/1.1: basis groen, crème, goud-accent, typografie, ruimte en bediening (ongewijzigd).
 * Gebruik .gl-brand op een pagina- of applicatiewrapper.
 * rem-waarden gaan uit van de gebruikelijke browserbasis van 16px.
 * Respecteer de door de gebruiker ingestelde lettergrootte; zet de root niet vast.
 * Dit bestand levert vormgeving, geen HTML-semantiek of interactielogica.
 */

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Kleuren. Goud is uitsluitend een decoratief accent. */
  --gl-green: #12594d;
  --gl-cream: #faf7ef;
  --gl-gold: #b58a3d;
  --gl-text: #203b35;
  --gl-text-secondary: #52645d;
  --gl-white: #ffffff;
  --gl-green-soft: #eaf0e9;
  --gl-input-border: #73847b;
  --gl-divider: #d8ddd5;
  --gl-green-hover: #0d443b;
  --gl-error: #a02b22;
  --gl-error-surface: #fceeea;

  --gl-font-heading: "Lora", Georgia, "Times New Roman", serif;
  --gl-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --gl-weight-body: 400;
  --gl-weight-ui: 600;
  --gl-weight-heading: 600;

  /* Mobiele uitgangswaarden; desktop vanaf 64rem. */
  --gl-h1-size: 2.25rem;       /* 36px */
  --gl-h1-leading: 2.75rem;    /* 44px */
  --gl-h2-size: 1.75rem;      /* 28px */
  --gl-h2-leading: 2.25rem;   /* 36px */
  --gl-h3-size: 1.5rem;       /* 24px */
  --gl-h3-leading: 2rem;      /* 32px */
  --gl-body-size: 1.25rem;    /* 20px, ook mobiel */
  --gl-body-leading: 2rem;    /* 32px */
  --gl-intro-size: 1.25rem;   /* 20px */
  --gl-intro-leading: 2rem;   /* 32px */
  --gl-ui-size: 1.125rem;     /* 18px */
  --gl-ui-leading: 1.625rem;  /* 26px */
  --gl-secondary-size: 1rem;  /* 16px */
  --gl-secondary-leading: 1.5rem; /* 24px */
  --gl-input-size: 1.25rem;   /* 20px */
  --gl-input-leading: 1.75rem; /* 28px */

  --gl-space-4: 0.25rem;
  --gl-space-8: 0.5rem;
  --gl-space-12: 0.75rem;
  --gl-space-16: 1rem;
  --gl-space-24: 1.5rem;
  --gl-space-32: 2rem;
  --gl-space-48: 3rem;
  --gl-space-64: 4rem;
  --gl-space-80: 5rem;
  --gl-space-96: 6rem;

  --gl-gutter: 1.5rem;        /* Mobiel 24px; zeer smal 20px; desktop 32px */
  --gl-container-max: 75rem;  /* 1200px, inclusief binnenruimte */
  --gl-prose-max: 62ch;
  --gl-section-space: 4rem;  /* 64px */
  --gl-control-min: 3.5rem;  /* 56px; nooit een vaste hoogte */
  --gl-icon-target-min: 3rem; /* 48px */
  --gl-radius-control: 0.5rem;
  --gl-radius-card: 0.75rem;
  --gl-focus-width: 0.1875rem;
  --gl-focus-gap: 0.1875rem;
  --gl-transition: 140ms ease;

  /* v1.2 (23-10-2026) — warm palet. Vanaf v1.3 ALLEEN binnen het component Rekenvoorbeelden
   * (section.warm-gold met .vb-kaarten). Nergens anders gebruiken, nooit voor fouten of dalingen. */
  --gl-terracotta: #9c4f37;   /* alleen rekenvoorbeelden: label "Rekenvoorbeelden". 5,5:1 op crème */
  --gl-chestnut: #6e2f23;     /* alleen rekenvoorbeelden: koppen en bedragen. 8,5:1 op lichtgoud */
  --gl-peach: #f7e6da;        /* niet meer in gebruik op de site (v1.3) */
  --gl-gold-light: #f5ebd3;   /* lichtgoud vlak: voorbeeld- en waardevlakken; geen tekstkleur */

  /* v1.3 (23-10-2026) — groen, crème en goud. Contrast gemeten met de WCAG-formule. */
  --gl-champagne: #f5ebd3;    /* champagne/lichtgoud vlak: prijsblok, kaarten, afsluiter. Tekst 10,2:1, groen 6,9:1 */
  --gl-sand: #efe5d0;         /* warm zand vlak: paginakoppen en wisselsecties. Tekst 9,7:1, groen 6,6:1 */
  --gl-sage: #eaf0e9;         /* zachtgroen vlak (= green-soft): pictogramcirkels, statuslabels */
  --gl-sage-strong: #d6e4da;  /* zachtgroen rand of chip op wit/crème; decoratief */
  --gl-bronze: #7a5a1e;       /* brons: kleine labels en bovenregels op licht. 5,9:1 op crème, 5,1:1 op zand */
  --gl-gold-line: #9a7432;    /* goudlijn: grafieklijn en dunne accentranden. 3,4:1 of meer op alle lichte vlakken */
  --gl-gold-on-green: #e3c27a;/* lichtgoud op diepgroen: labels op groene vlakken. 4,8:1 */
  --gl-up: #12594d;           /* stijging: groen, altijd met ▲ en tekst */
  --gl-down: #52645d;         /* daling: neutraal groengrijs, altijd met ▼ en tekst. Nooit rood. 5,9:1 op crème */
  --gl-radius-xl: 1.5rem;     /* ronde kaarten (prijsblok, stappen, grafiek) */
  --gl-radius-pill: 999px;    /* knoppen in een groep, chips en labels */

  /* v1.2 — subtiele beweging: alleen bij hover of bij in beeld scrollen; uit bij minder beweging. */
  --gl-motion-hover: 160ms ease-out;
  --gl-motion-reveal: 420ms ease-out;
  --gl-reveal-distance: 0.75rem;
  --gl-shadow-lift: 0 0.5rem 1.5rem rgb(32 59 53 / 0.1);
}

@media (max-width: 22.4375rem) {
  :root { --gl-gutter: 1.25rem; } /* <=359px bij een basis van 16px */
}

@media (min-width: 64rem) {
  :root {
    --gl-gutter: 2rem;
    --gl-h1-size: 3rem;
    --gl-h1-leading: 3.625rem;
    --gl-h2-size: 2.25rem;
    --gl-h2-leading: 2.875rem;
    --gl-h3-size: 1.625rem;
    --gl-h3-leading: 2.125rem;
    --gl-intro-size: 1.375rem;
    --gl-intro-leading: 2.125rem;
    --gl-section-space: 6rem;
  }
}

.gl-brand,
.gl-brand *,
.gl-brand *::before,
.gl-brand *::after {
  box-sizing: border-box;
}

.gl-brand {
  color: var(--gl-text);
  background: var(--gl-cream);
  font-family: var(--gl-font-body);
  font-size: var(--gl-body-size);
  font-weight: var(--gl-weight-body);
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}

.gl-brand :where(button, input, select, textarea) { font-family: inherit; }
.gl-brand :where(img, video) { max-inline-size: 100%; block-size: auto; }
.gl-brand strong { font-weight: var(--gl-weight-ui); }

.gl-container {
  inline-size: 100%;
  max-inline-size: var(--gl-container-max);
  margin-inline: auto;
  padding-inline: var(--gl-gutter);
}

.gl-section { padding-block: var(--gl-section-space); }
.gl-prose { max-inline-size: var(--gl-prose-max); }
.gl-stack { display: grid; gap: var(--gl-space-24); }
.gl-stack > * { margin-block: 0; }

.gl-h1,
.gl-h2,
.gl-h3 {
  color: var(--gl-green);
  font-family: var(--gl-font-heading);
  font-weight: var(--gl-weight-heading);
  font-style: normal;
  letter-spacing: normal;
  margin-block: 0 var(--gl-space-16);
}

.gl-h1 { font-size: var(--gl-h1-size); line-height: calc(44 / 36); }
.gl-h2 { font-size: var(--gl-h2-size); line-height: calc(36 / 28); }
.gl-h3 { font-size: var(--gl-h3-size); line-height: calc(32 / 24); }

.gl-body {
  font-size: var(--gl-body-size);
  line-height: 1.6;
  margin-block: 0 var(--gl-space-24);
}

.gl-intro {
  font-size: var(--gl-intro-size);
  line-height: 1.6;
  margin-block: 0 var(--gl-space-24);
}

.gl-secondary {
  color: var(--gl-text-secondary);
  font-size: var(--gl-secondary-size);
  line-height: 1.5;
}

.gl-prose p { margin-block: 0 var(--gl-space-24); }
.gl-prose :where(ul, ol) {
  margin-block: 0 var(--gl-space-24);
  padding-inline-start: var(--gl-space-32);
}
.gl-prose li + li { margin-block-start: var(--gl-space-8); }
.gl-prose :where(.gl-h2, .gl-h3):not(:first-child) {
  margin-block-start: var(--gl-space-48);
}

@media (min-width: 64rem) {
  .gl-h1 { line-height: calc(58 / 48); }
  .gl-h2 { line-height: calc(46 / 36); }
  .gl-h3 { line-height: calc(34 / 26); }
  .gl-intro { line-height: calc(34 / 22); }
}

.gl-link {
  color: var(--gl-green);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}
.gl-link:hover { color: var(--gl-green-hover); }

.gl-button,
.gl-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gl-space-8);
  max-inline-size: 100%;
  min-block-size: var(--gl-control-min);
  border: 0.125rem solid var(--gl-green);
  border-radius: var(--gl-radius-control);
  padding: var(--gl-space-12) var(--gl-space-24);
  background: var(--gl-green);
  color: var(--gl-cream);
  font-family: var(--gl-font-body);
  font-size: var(--gl-ui-size);
  font-weight: var(--gl-weight-ui);
  line-height: calc(26 / 18);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--gl-transition), border-color var(--gl-transition);
}

.gl-button:hover,
.gl-icon-button:hover {
  background: var(--gl-green-hover);
  border-color: var(--gl-green-hover);
}

.gl-button--secondary {
  background: var(--gl-cream);
  color: var(--gl-green);
}
.gl-button--secondary:hover {
  background: var(--gl-green-soft);
  color: var(--gl-green-hover);
}

.gl-icon-button {
  min-inline-size: var(--gl-icon-target-min);
  min-block-size: var(--gl-icon-target-min);
  padding: var(--gl-space-8);
}

.gl-button:disabled,
.gl-icon-button:disabled,
.gl-button[aria-disabled="true"],
.gl-icon-button[aria-disabled="true"] {
  background: var(--gl-green-soft);
  border-color: var(--gl-input-border);
  color: var(--gl-text-secondary);
  cursor: not-allowed;
}

.gl-actions { display: flex; flex-wrap: wrap; gap: var(--gl-space-16); }

.gl-form { display: grid; gap: var(--gl-space-24); max-inline-size: var(--gl-prose-max); }
.gl-field { display: grid; gap: var(--gl-space-8); min-inline-size: 0; }

.gl-field__label,
.gl-legend {
  color: var(--gl-text);
  font-size: var(--gl-ui-size);
  font-weight: var(--gl-weight-ui);
  line-height: calc(26 / 18);
}

.gl-field__hint {
  color: var(--gl-text-secondary);
  font-size: var(--gl-secondary-size);
  line-height: 1.5;
  margin: 0;
}

.gl-field__control {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--gl-control-min);
  border: 0.125rem solid var(--gl-input-border);
  border-radius: var(--gl-radius-control);
  padding: var(--gl-space-12) var(--gl-space-16);
  color: var(--gl-text);
  background: var(--gl-white);
  font-family: var(--gl-font-body);
  font-size: var(--gl-input-size);
  font-weight: var(--gl-weight-body);
  line-height: 1.4;
}

.gl-field__control::placeholder { color: var(--gl-text-secondary); opacity: 1; }
textarea.gl-field__control { min-block-size: 9rem; resize: vertical; }
.gl-field__control[aria-invalid="true"] { border-color: var(--gl-error); }

.gl-field__error {
  color: var(--gl-error);
  font-size: var(--gl-ui-size);
  line-height: calc(26 / 18);
  margin: 0;
}

.gl-error-summary {
  padding: var(--gl-space-24);
  border: 0.125rem solid var(--gl-error);
  border-radius: var(--gl-radius-control);
  background: var(--gl-error-surface);
  color: var(--gl-error);
}
.gl-error-summary a { color: inherit; text-decoration: underline; }

.gl-fieldset { min-inline-size: 0; border: 0; margin: 0; padding: 0; }
.gl-legend { padding: 0; margin-block-end: var(--gl-space-12); }
.gl-check {
  display: flex;
  align-items: center;
  gap: var(--gl-space-12);
  min-block-size: var(--gl-control-min);
  font-size: var(--gl-ui-size);
  line-height: calc(26 / 18);
  cursor: pointer;
}
.gl-check input {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  accent-color: var(--gl-green);
}

.gl-card {
  padding: var(--gl-space-24);
  border: 1px solid var(--gl-divider);
  border-radius: var(--gl-radius-card);
  background: var(--gl-white);
}
@media (min-width: 64rem) {
  .gl-card { padding: var(--gl-space-32); }
}
.gl-divider { border: 0; border-block-start: 1px solid var(--gl-divider); }

/* De dubbele ring blijft op lichte én donkere merkvakken zichtbaar.
 * Laat de ring vrij; overflow:hidden op een ouder kan hem afsnijden. */
.gl-brand :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--gl-focus-width) solid var(--gl-green);
  outline-offset: var(--gl-focus-gap);
  box-shadow: 0 0 0 var(--gl-focus-gap) var(--gl-cream);
}

.gl-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gl-brand,
  .gl-brand *,
  .gl-brand *::before,
  .gl-brand *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .gl-brand :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  .gl-button,
  .gl-icon-button,
  .gl-field__control { border-color: ButtonText; }
}