/* Design tokens – Het kan als je het wilg
   Source: Figma 'Ontwerp v1.4' (variables + styles). These names become the
   Bricks colour palette and global variables one-to-one. 1rem = 10px. */

:root {
  /* ---- Colours (palette) ------------------------------------------------ */
  --green: #11562f;          /* Figma: Primary / Headings / Links color */
  --green-light: #207244;    /* button hover (Losse elementen) */
  --red: #cd212d;            /* Figma: Focus color */
  --red-light: #e43a43;      /* focus button hover */
  --sand: #f0f1dd;           /* Figma: Background color (default page background) */
  --sand-dark: #e6e8cd;      /* Figma: Alternate background color */
  --line: #dadbcd;           /* Figma: Borders & lines color */
  --grey: #757575;           /* Figma: Text color light */
  --black: #000000;          /* Figma: Body text color */
  --white: #ffffff;

  /* ---- Functional colours (switched by bg-white / bg-tint / bg-dark) ---- */
  --color-bg: var(--sand);
  --color-text: var(--black);
  --color-text-light: var(--grey);
  --color-heading: var(--green);
  --color-link: var(--green);
  --color-link-hover: var(--red);
  --color-line: var(--line);
  --color-surface: var(--white);       /* cards on a section */
  --color-surface-alt: var(--white);   /* tip boxes; sand on white sections */
  --btn-bg: var(--green);
  --btn-color: var(--white);
  --btn-bg-hover: var(--green-light);
  --btn-focus-bg: var(--red);
  --btn-focus-bg-hover: var(--red-light);

  /* ---- Fonts --------------------------------------------------------------- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Poppins', Arial, Helvetica, sans-serif;

  /* ---- Type sizes (desktop 1440 → mobile 390) ------------------------------ */
  --text-s: 1.6rem;                                   /* labels, date label, captions */
  --text-base: clamp(1.6rem, 1.52rem + 0.21vw, 1.8rem); /* Body text 18 */
  --text-m: clamp(2rem, 1.85rem + 0.38vw, 2.4rem);    /* Intro text 24 / 20, card titles 24 */
  --text-h4: clamp(2.4rem, 2.25rem + 0.38vw, 2.8rem); /* footer headings 28 */
  --text-h3: clamp(2.8rem, 2.35rem + 1.15vw, 4rem);   /* H3 40 */
  --text-h2: clamp(4rem, 3.25rem + 1.91vw, 6rem);     /* H2 60 / 48 (Figma H2 mobile) */
  --text-h1: clamp(4.4rem, 3.35rem + 2.69vw, 7.2rem); /* H1 72 */
  --text-number: clamp(4.8rem, 4.03rem + 1.92vw, 7.2rem); /* counter 124.362 */

  /* ---- Type details ---------------------------------------------------------- */
  --leading-tight: 1.2;      /* headings */
  --leading-snug: 1.5;       /* card titles (Poppins SemiBold 24) */
  --leading-body: 1.67;      /* body + intro */
  --tracking-tight: -0.03em; /* Figma: letter-spacing -3% on all Newsreader headings */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing (Figma values pulled onto a fixed scale) ---------------------- */
  --space-2xs: 0.4rem;
  --space-xs: clamp(0.6rem, 0.55rem + 0.13vw, 0.8rem);   /* 8 */
  --space-s: clamp(1.2rem, 1.1rem + 0.26vw, 1.6rem);     /* 16 */
  --space-m: clamp(1.6rem, 1.45rem + 0.38vw, 2.4rem);    /* 24 */
  --space-l: clamp(2.4rem, 2.25rem + 0.38vw, 3.2rem);    /* 32 */
  --space-xl: clamp(3.2rem, 2.9rem + 0.77vw, 4.8rem);    /* 48 */
  --space-2xl: clamp(4rem, 3.55rem + 1.15vw, 6.4rem);    /* 64 */
  --space-3xl: clamp(5.6rem, 4.85rem + 1.92vw, 9.6rem);  /* 96 */
  --space-section: var(--space-3xl);                     /* section padding top/bottom */
  --space-head: var(--space-l);                          /* section head → content */
  --space-text: var(--space-m);                          /* heading → text → button */
  --grid-gap: clamp(1.6rem, 1.15rem + 1.15vw, 2.4rem);   /* card grids (Figma 24–28) */
  --column-gap: var(--space-2xl);                        /* layout columns (64) */

  /* ---- Layout ---------------------------------------------------------------- */
  --container-width: 110rem;                             /* 1100 content, 170 margin at 1440 */
  --gutter: clamp(2rem, 1.25rem + 1.92vw, 4rem);
  --text-width: 72rem;                                   /* intro / head block max width */
  --header-height: 15rem;

  /* ---- Effects ----------------------------------------------------------------- */
  --radius-s: 0.8rem;        /* buttons, inputs, small tiles */
  --radius-m: 3rem;          /* leaf corner on cards: top-right + bottom-left */
  --radius-l: 6rem;          /* leaf corner on large photos */
  --shadow-card: 0 0 30px rgba(0, 0, 0, 0.08);   /* Figma: Card drop shadow */
  --shadow-hover: 0 0 4px rgba(0, 0, 0, 0.15);   /* button hover */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.2s;
}

@media (max-width: 767px) {
  :root {
    --header-height: 9rem;
    --radius-m: 2.4rem;
    --radius-l: 4rem;
  }
}