:root {

  /* ============================================================
     Kleuren — Tranceversum identiteit
     ============================================================ */

  --color-green-light: #25650d;
  --color-green-dark: #164406;

  --color-offwhite: #fafaf9;
  --color-white: #ffffff;

  --color-black: #000000;
  --color-offblack: #585858;

  --color-grey-light: #dddddd;

  /* deze footer-hover-kleur thans niet in gebruik */
  --color-yellow-hover: #FCE883;

  --color-accent-bg: #EDF2EE;
  --color-accent-bg-soft: rgba(37, 101, 13, 0.05);

  --color-border: #d0ddcf;
  --color-zebra: #EDF2EE;

  /* functionele kleuren */
  --color-bg: var(--color-offwhite);
  --color-text: var(--color-offblack);
  --color-heading: var(--color-black);

  /* gedempt rood voor foutmeldingen (sober, voldoende contrast op offwhite) */
  --color-red-muted: #8a2b2b;


  /* ============================================================
     Typografie
     ============================================================ */

  /* Body: modern, neutraal, therapeutisch veilig */
  --font-body: "Carlito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body-size: 23px;
  --body-lineheight: 1.5;

  /* Headings: klassiek, Grieks‑Romeins, warm */
  --font-heading: "Abyssinica SIL", Georgia, serif;

  /* Schaal (voor componenten en layout) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-xxl: 2rem;


  /* ============================================================
     Layout
     ============================================================ */

  --container-width: 1150px;

  --gutter: 1.5rem;

  --media-text-gap: clamp(2rem, 4vw, 4rem);


  /* ============================================================
     Breakpoints
     ============================================================ */

  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;


  /* ============================================================
     Radii (voorbereid, maar neutraal)
     ============================================================ */

  --radius-sm: 0;
  --radius-md: 0;


  /* ============================================================
     Shadows (voorbereid, maar neutraal)
     ============================================================ */

  --shadow-sm: none;
  --shadow-md: none;

}