/* ============================================================
   DESIGN TOKENS - Premium Memories (zwart/goud, luxe)
   Wordt in Fase 4 verfijnd en (deels) spiegelbaar gemaakt naar ACF.
   Alle waarden als CSS custom properties zodat 1 plek de bron is.
   ============================================================ */

:root {
  /* -- Kleuren: merk -- */
  --pb-black:      #0B0B0B;   /* near-black basis */
  --pb-black-2:    #141414;   /* iets lichter zwart (kaarten op zwart) */
  --pb-gold-1:     #BF9B45;   /* gradient stop 1 (donker goud) */
  --pb-gold-2:     #E7C766;   /* gradient stop 2 (licht goud, highlight) */
  --pb-gold-3:     #A67C29;   /* gradient stop 3 (diep goud) */
  --pb-gold:       #C9A44C;   /* effen goud (fallback / borders) */
  --pb-cream:      #FAF7F0;   /* off-white leesvlak (body) */
  --pb-cream-2:    #F1EADA;   /* dieper warm zand (afwisselende sectie-vlakken) */
  --pb-white:      #FFFFFF;

  /* -- Kleuren: tekst -- */
  --pb-text:       #1A1A1A;   /* body-tekst op licht */
  --pb-text-inv:   #F5F1E8;   /* tekst op zwart */
  --pb-muted:      #6B6B6B;   /* secundaire tekst */
  --pb-muted-inv:  #B9B2A3;   /* secundaire tekst op zwart */

  /* -- Randen & schaduw -- */
  --pb-border:      #E6E1D6;
  --pb-border-gold: rgba(201,164,76,.45);
  --pb-shadow-sm:  0 2px 8px rgba(11,11,11,.06);
  --pb-shadow-md:  0 8px 30px rgba(11,11,11,.10);
  --pb-shadow-lg:  0 20px 60px rgba(11,11,11,.16);

  /* -- Goud-gradient (accenten, knoppen) -- */
  --pb-grad-gold: linear-gradient(135deg, var(--pb-gold-1) 0%, var(--pb-gold-2) 50%, var(--pb-gold-3) 100%);

  /* -- Typografie -- */
  --pb-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pb-fw-normal: 400;
  --pb-fw-medium: 500;
  --pb-fw-semibold: 600;
  --pb-fw-bold: 700;
  --pb-fw-black: 800;

  /* Type-schaal (fluid, clamp) */
  --pb-fs-display: clamp(2.6rem, 1.8rem + 3.6vw, 4.7rem);
  --pb-fs-h1:      clamp(2.0rem, 1.5rem + 2.2vw, 3.2rem);
  --pb-fs-h2:      clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --pb-fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --pb-fs-body:    1.0625rem;   /* 17px */
  --pb-fs-small:   0.875rem;
  --pb-lh-tight:   1.1;
  --pb-lh-normal:  1.6;
  --pb-ls-caps:    0.08em;      /* letter-spacing voor caps-koppen */

  /* -- Spacing-schaal -- */
  --pb-sp-1: 0.25rem;
  --pb-sp-2: 0.5rem;
  --pb-sp-3: 0.75rem;
  --pb-sp-4: 1rem;
  --pb-sp-5: 1.5rem;
  --pb-sp-6: 2rem;
  --pb-sp-7: 3rem;
  --pb-sp-8: 4rem;
  --pb-sp-9: 6rem;
  --pb-section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* -- Radius -- */
  --pb-radius-sm: 8px;
  --pb-radius:    14px;
  --pb-radius-lg: 24px;
  --pb-radius-pill: 999px;

  /* -- Layout -- */
  --pb-container: 1200px;
  --pb-container-narrow: 820px;

  /* -- Breakpoints (ter referentie in JS/comments; media queries hardcoden waarde) --
     sm 480px | md 768px | lg 1024px | xl 1200px */

  /* -- Transitions -- */
  --pb-t-fast: .15s ease;
  --pb-t:      .25s ease;
}