/* ==========================================================================
   EJSound — tokens
   Core Framework-namen, gekoppeld aan de presets uit theme.json. Pas een kleur
   of maat aan in theme.json (of in de Site-editor onder Stijlen) en de hele
   site volgt. 1rem = 10px.
   ========================================================================== */

:root {
  --content-width: 136rem;
  --gutter: clamp(1.6rem, 0.229rem + 4.286vw, 6.4rem);
  --grid-gap: clamp(1.6rem, 1.143rem + 1.429vw, 3.2rem);

  --primary: var(--wp--preset--color--primary);
  --primary-d-1: var(--wp--preset--color--primary-d-1);
  --primary-d-2: var(--wp--preset--color--primary-d-2);
  --primary-l-3: #ffc9b3;

  --secondary: var(--wp--preset--color--secondary);
  --secondary-d-1: #e7e0d4;

  --base: var(--wp--preset--color--base);
  --base-l-1: var(--wp--preset--color--base-l-1);
  --base-l-2: var(--wp--preset--color--base-l-2);
  --base-l-3: #a59c8f;
  --base-l-4: var(--wp--preset--color--base-l-4);
  --white: var(--wp--preset--color--white);

  --bg-body: var(--wp--preset--color--bg-body);
  --bg-surface: var(--wp--preset--color--white);
  --bg-light: var(--wp--preset--color--secondary);
  --bg-accent: var(--wp--preset--color--primary);

  --text-title: var(--base);
  --text-body: var(--base-l-1);
  --text-muted: var(--base-l-2);
  --border-primary: var(--base-l-4);
  --fout: #a3161a;

  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-mono: var(--wp--preset--font-family--mono);

  --text-xs: var(--wp--preset--font-size--xs);
  --text-s: var(--wp--preset--font-size--s);
  --text-m: var(--wp--preset--font-size--m);
  --text-l: var(--wp--preset--font-size--l);
  --text-xl: var(--wp--preset--font-size--xl);
  --text-2xl: var(--wp--preset--font-size--2-xl);
  --text-3xl: var(--wp--preset--font-size--3-xl);
  --text-4xl: var(--wp--preset--font-size--4-xl);
  --text-5xl: var(--wp--preset--font-size--5-xl);

  --space-3xs: var(--wp--preset--spacing--3-xs);
  --space-2xs: var(--wp--preset--spacing--2-xs);
  --space-xs: var(--wp--preset--spacing--xs);
  --space-s: var(--wp--preset--spacing--s);
  --space-m: var(--wp--preset--spacing--m);
  --space-l: var(--wp--preset--spacing--l);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2-xl);
  --space-3xl: var(--wp--preset--spacing--3-xl);
  --space-4xl: var(--wp--preset--spacing--4-xl);
  --section-space: var(--space-3xl);

  --radius-xs: 0.2rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 62.5% op de site en in het editor-canvas, niet in de beheeromgeving zelf */
html:not(:has(> body.wp-admin)) {
  font-size: 62.5%;
}