/*
  TOKENS — de huisstijl op één plek.

  Alles wat je later zou willen bijstellen hoort hier te staan, en nergens
  anders. Pas je hier een kleur of een maat aan, dan verandert hij overal mee.

  De clamp()-waarden groeien mee met het schermformaat: de eerste waarde geldt
  bij 375px breed (telefoon), de laatste bij 1440px (laptop), en daartussen
  schaalt hij vloeiend mee. Er zijn dus bijna geen breekpunten nodig.
*/

:root {
	/* ---------------------------------------------------------------
	   KERNKLEUREN
	   De zes uit de stylesheet. Gebruik in de opmaak liever de rollen
	   verderop: dan kun je later één rol omzetten zonder alles na te lopen.
	   --------------------------------------------------------------- */
	--dp-forest: #122b07; /* donkergroen, de donkere blokken en alle randen */
	--dp-ink: #0f180c; /* bijna-zwart, nog een tint dieper dan forest */
	--dp-paper: #f5f9ed; /* gebroken wit, de achtergrond van de lichte blokken */
	--dp-moss: #e8f3d3; /* zacht groen, voor lichte vlakken binnen paper */
	--dp-lime: #e6ff56; /* de CTA-kleur. Alleen knoppen. Zie de regel hieronder. */
	--dp-orange: #f37337; /* alleen op donker, anders is het contrast te laag */

	/*
	   ACCENTKLEUREN — exact de vier uit de accent bubbles.
	   Heb je ergens een extra kleur nodig, dan pak je er een uit dit rijtje.
	   Niets anders, en met name geen roze en geen lime.
	*/
	--dp-peach: #fea175;
	--dp-leaf: #cfde7c;
	--dp-shell: #f5f9ed;
	/* de vierde accentkleur is --dp-forest zelf */

	/* Zachtere varianten, voor grote vlakken waar de volle kleur schreeuwt. */
	--dp-peach-soft: #ffd9c4;
	--dp-leaf-soft: #e6eec2;
	--dp-lime-soft: #f2ffa8; /* lichte versie van de CTA-kleur, mag wél als vlak */

	/* Zand: de warme neutrale tint onder de template-onthulling. */
	--dp-sand: #ece5d8;

	/* Bast: diep roodbruin, uit Simones eigen garantieblok. Alleen daar. */
	--dp-bast: #2d1108;

	/* ---------------------------------------------------------------
	   ROLLEN
	   Wat betekent een kleur op deze plek. Dit gebruik je in de opmaak.
	   --------------------------------------------------------------- */
	--dp-bg: var(--dp-paper);
	--dp-bg-dark: var(--dp-forest);
	--dp-text: #2c3a26; /* forest, maar opgelicht: rustiger om lang te lezen */
	--dp-text-strong: var(--dp-forest);
	--dp-text-muted: #5e6b57;
	--dp-text-on-dark: #e7eedd;
	--dp-text-on-dark-muted: #dde6d3; /* flink opgelicht: op donkergroen las het te vaag */

	/* Tekstlinks: een tint groener dan de bodytekst, zodat je ze ziet zonder
	   dat ze uit de lopende tekst springen. Op donker het zachte blad. */
	--dp-link: #43701f;
	--dp-link-op-donker: var(--dp-leaf);

	--dp-line: rgb(18 43 7 / 0.16); /* de 1px rand om kaarten op licht */
	--dp-line-strong: rgb(18 43 7 / 0.32);
	--dp-line-on-dark: rgb(231 238 221 / 0.18);

	/* De rand om alle pills, bubbels en chips: overal dezelfde zachte rand. */
	--dp-pil-rand: rgb(18 43 7 / 0.18);

	--dp-focus: var(--dp-link); /* middengroen: koraal leek op een foutmelding */

	/* ---------------------------------------------------------------
	   OVERLAYS OP FOTO'S
	   Nooit groen áls kleurwaas. Alleen donkergroen of zwart, en donker
	   genoeg dat witte tekst er overal overheen kan.
	   --------------------------------------------------------------- */
	--dp-overlay: linear-gradient(
		180deg,
		rgb(15 24 12 / 0.82) 0%,
		rgb(18 43 7 / 0.74) 55%,
		rgb(15 24 12 / 0.88) 100%
	);
	--dp-overlay-flat: rgb(15 24 12 / 0.7);

	/* ---------------------------------------------------------------
	   LETTERTYPES
	   --------------------------------------------------------------- */
	--dp-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--dp-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	--dp-font-hand: "Chelsie Hilton", "Segoe Script", cursive;

	/*
	   De variabele assen van Fraunces. SOFT rondt de punten van de letters af,
	   WONK zet de eigenwijze schuine g en y aan. Samen maken ze het verschil
	   tussen "chique tijdschrift" en "streng juridisch".
	*/
	--dp-fraunces-axes: "SOFT" 40, "WONK" 1;

	--dp-weight-display: 600;
	--dp-weight-body: 400;
	--dp-weight-medium: 500;
	--dp-weight-bold: 700;

	/* ---------------------------------------------------------------
	   TYPESCHAAL
	   375px -> 1440px. Aan de bovenkant bewust groot: de pagina moet
	   indruk maken, niet netjes zijn.
	   --------------------------------------------------------------- */
	--dp-size-display: clamp(2.75rem, 1.55rem + 5.12vw, 6rem); /* alleen de hero */
	--dp-size-h1: clamp(2.5rem, 1.66rem + 3.57vw, 4.75rem);
	--dp-size-h2: clamp(2rem, 1.44rem + 2.4vw, 3.5rem);
	--dp-size-h3: clamp(1.55rem, 1.27rem + 1.2vw, 2.3rem);
	--dp-size-h4: clamp(1.25rem, 1.11rem + 0.6vw, 1.625rem);
	--dp-size-h5: clamp(1.1rem, 1.03rem + 0.3vw, 1.3rem);

	--dp-size-lead: clamp(1.1rem, 1.02rem + 0.32vw, 1.3rem);
	--dp-size-body: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
	--dp-size-small: 0.9375rem;
	--dp-size-xs: 0.8125rem;

	--dp-leading-display: 1.02;
	--dp-leading-heading: 1.1;
	--dp-leading-body: 1.62;

	--dp-tracking-display: -0.025em;
	--dp-tracking-heading: -0.018em;
	--dp-tracking-eyebrow: 0.16em;

	/* ---------------------------------------------------------------
	   RUIMTE
	   --------------------------------------------------------------- */
	--dp-space-3xs: 0.25rem;
	--dp-space-2xs: 0.5rem;
	--dp-space-xs: 0.75rem;
	--dp-space-s: 1rem;
	--dp-space-m: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
	--dp-space-l: clamp(2rem, 1.47rem + 2.25vw, 3.5rem);
	--dp-space-xl: clamp(3rem, 1.94rem + 4.51vw, 6rem);
	--dp-space-2xl: clamp(4rem, 2.23rem + 7.52vw, 9rem);

	/* Verticale ruimte binnen een sectie. */
	/* Vaste afstand tussen de kop van een sectie en wat eronder komt: kaarten,
	   een carrousel, een raster. Overal dezelfde, anders voelt de ene sectie
	   krap en de andere leeg. */
	--dp-kopruimte: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);

	--dp-section-y: clamp(4.5rem, 3.09rem + 6.02vw, 8.5rem);
	--dp-section-y-tight: clamp(3rem, 2.29rem + 3.01vw, 5rem);

	/* ---------------------------------------------------------------
	   BREEDTES
	   --------------------------------------------------------------- */
	--dp-container: 78rem; /* 1248px */
	--dp-container-wide: 88rem;
	--dp-container-narrow: 54rem;
	--dp-gutter: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
	--dp-measure: 62ch; /* prettige regellengte voor lopende tekst */

	/* ---------------------------------------------------------------
	   VORMTAAL
	   Rond, maar niet zeepachtig. De sectie-radius van 30px is de maat
	   waarmee de blokken als tabjes over elkaar heen schuiven.
	   --------------------------------------------------------------- */
	--dp-radius-section: 30px;
	--dp-radius-l: 22px;
	--dp-radius-m: 16px;
	--dp-radius-s: 10px;
	--dp-radius-pill: 999px;
	--dp-border: 1px;

	/* ---------------------------------------------------------------
	   SCHADUW
	   Simone houdt van vaag en zacht, niet van een harde slagschaduw.
	   --------------------------------------------------------------- */
	--dp-shadow-s: 0 2px 10px rgb(18 43 7 / 0.05);
	--dp-shadow-m: 0 10px 30px -12px rgb(18 43 7 / 0.16);
	--dp-shadow-l: 0 30px 70px -30px rgb(18 43 7 / 0.3);
	--dp-shadow-glow: 0 10px 34px -10px rgb(18 43 7 / 0.22);

	/* ---------------------------------------------------------------
	   BEWEGING
	   --------------------------------------------------------------- */
	--dp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dp-transition: 200ms var(--dp-ease);
	--dp-transition-slow: 500ms var(--dp-ease-out);

	/* Hoeveel ruimte een ankerlink boven zijn doel laat, voor de zwevende navigatie. */
	--dp-anker-ruimte: 6rem;

	--dp-focus-width: 3px;
	--dp-focus-offset: 3px;
}