:root {
  /* =====================================
     BRAND COLORS
     ===================================== */

  --green-900: #1F2624; /* donker groen */
  --green-600: #5C6A55; /* lichtgroen */
  --sand-100:  #F9F0D5; /* zand */
  --gold-500:  #C8A951; /* goud */

  /* Logo nuance */
  --logo-mountain-mid:  #344530;
  --logo-mountain-back: #525A3B;
  --logo-sun:           #E1B747;

  /* =====================================
     UI TOKENS
     ===================================== */

  /* Backgrounds */
  --bg-page: #ffffff;
  --bg-nav: var(--green-900);
  --bg-section-green: var(--green-600);
  --bg-section-sand: var(--sand-100);

  /* Cards */
  --bg-card: var(--green-600);
  --bg-card-60: rgba(92, 106, 85, 0.6);

  /* Text */
  --text-on-light: var(--green-900);
  --text-on-dark: var(--sand-100);
  --text-link-on-dark: var(--gold-500);

  /* Borders / lines */
  --border-subtle: rgba(31, 38, 36, 0.12);
  --border-gold: var(--gold-500);

  /* Buttons */
  --btn-bg: var(--gold-500);
  --btn-bg-hover: var(--logo-sun);
  --btn-text: var(--green-900);

  /* Gradients */
  --gradient-green: linear-gradient(
    180deg,
    var(--green-900) 0%,
    var(--green-900) 60%,
    var(--green-600) 100%
  );

  --gradient-why: linear-gradient(
    180deg,
    var(--green-900) 0%,
    var(--green-900) 100%,
    var(--green-600) 100%
  );

  /* =====================================
     TYPOGRAPHY TOKENS
     ===================================== */

  --font-body: "Lora", serif;
  --font-title: "Lora", serif;
  --font-logo: "Tangerine", cursive;

  /* Type scale */
  --fs-80: 0.65rem;
  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.25rem;
  --fs-400: 1.7rem;
  --fs-500: 1.9rem;
  --fs-600: 2.4rem;
  --fs-700: 3rem;

  /* Generic line-heights */
  --lh-body: 1.6;
  --lh-title: 1.5;

  /* Semantic typography — desktop */
--h1-size: clamp(2rem, 2vw, 3rem);
--h1-line: 1.2;
--h1-weight: 600;

--h2-size: var(--fs-500);
--h2-line: var(--lh-title);
--h2-weight: 600;

--h3-size: 1.4rem;
--h3-line: 1.3;
--h3-weight: 600;

--p-size: var(--fs-300);
--p-line: 1.65;
--p-weight: 400;

--p-lead-size: var(--fs-300);
--p-lead-line: 1.65;
--p-lead-weight: 600;

--p-sub-size: var(--fs-300);
--p-sub-line: 1.65;
--p-sub-weight: 600;

/* Semantic typography — mobile */
--h1-size-mobile: 1.8rem;
--h1-line-mobile: 1.25;

--h2-size-mobile: 1.6rem;
--h2-line-mobile: 1.25;

--h3-size-mobile: 1.2rem;
--h3-line-mobile: 1.3;
--h3-weight-mobile: 600;

--p-size-mobile: 0.95rem;
--p-line-mobile: 1.65;

--p-lead-size-mobile: 1rem;
--p-lead-line-mobile: 1.65;
--p-lead-weight-mobile: 600;

--p-sub-size-mobile: 1rem;
--p-sub-line-mobile: 1.65;
--p-sub-weight-mobile: 600;

/* =====================================
   REVIEW TYPOGRAPHY TOKENS
   ===================================== */

/* Desktop */

--review-text-size: var(--fs-300);
--review-text-line: 1.7;
--review-text-style: italic;

--review-author-size: var(--fs-100);
--review-author-line: 1.4;

--review-meta-size: var(--fs-100);
--review-meta-line: 1.4;

/* Navigatie pijlen */
--review-nav-size: 2.25rem;


/* Mobile */

--review-text-size-mobile: var(--fs-200);
--review-text-line-mobile: 1.6;

--review-author-size-mobile: var(--fs-100);
--review-meta-size-mobile: var(--fs-100);

--review-nav-size-mobile: 1.8rem;




  /* =====================================
     SPACING SCALE
     ===================================== */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-22: 6rem;

  /* =====================================
     LAYOUT
     ===================================== */

  --container-max: 1200px;
  --container-pad: 1.5rem;
  --section-pad-y: 5rem;

  --header-height: 72px;

  /* =====================================
     UI DETAILS
     ===================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm:
    0 4px 10px rgba(0,0,0,0.16),
    0 10px 24px rgba(0,0,0,0.12);

  --shadow-md:
    0 8px 18px rgba(0,0,0,0.18),
    0 20px 40px rgba(0,0,0,0.16);

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* =====================================
     BREAKPOINTS
     Afspraken:
     600px / 900px / 1200px
     ===================================== */
}