/* =========================================================================
   JoleneMelsie — MERKTOKENS
   -------------------------------------------------------------------------
   Het officiële palet en de typografie uit het brandbook (16-08-2026).
   Bron: merk/brandbook-visual.png sectie 4 en 5; uitgelezen en verantwoord in
   merk/PALET.md.

   Dit is het enige bestand met kleuren, letters en rondingen. site.css bevat
   geen enkele losse kleurwaarde en gebruikt uitsluitend de variabelen
   hieronder. Wijzig hier iets en de hele site gaat mee.

   HARDE MERKREGEL: de huisstijl is LICHT. Geen grote donkere vlakken, geen
   donkerpaarse paginaachtergrond. Diep indigo is uitsluitend tekstkleur,
   dunne lijn en klein contrastelement.
   ========================================================================= */

@import url('poppins.css');

:root {
  /* ------------------------------------------------------- roze (dragend) */
  --merk-roze-wolk: #FFE9F4;      /* Cloud White  — paginaachtergrond */
  --merk-roze-blush: #FFD6EC;     /* Blush Pink   — kaarten, zachte vlakken */
  --merk-roze-zacht: #FFC1E6;     /* Cloud Pink   — randen, scheidingen */
  --merk-roze-bubbel: #FF9AD5;    /* Bubblegum    — accenten, hover */
  --merk-roze: #FF6EB6;           /* Jolene Pink  — DE merkkleur, primaire knop */

  /* ------------------------------------------------------ paars (steun) */
  --merk-paars-diep: #6B5CCF;     /* Deep Violet  — secundaire knop */
  --merk-paars: #987BF7;          /* Lilac        — iconen, accenten */
  --merk-paars-pastel: #BFA6FF;   /* Pastel Purple */
  --merk-lavendel: #D9C7FF;       /* Soft Lavender — zie noot 1 in merk/PALET.md */

  /* ------------------------------------------------------------- accent */
  --merk-geel: #FFB700;           /* Lightning Yellow — de bliksem, "live" */

  /* -------------------------------------------------- neutraal/contrast */
  --merk-wit: #FFFFFF;
  --merk-wit-zacht: #F9F5FF;      /* Soft White */
  --merk-wit-lila: #F4F0FA;       /* Pale Lilac White */
  --merk-indigo: #2D2447;         /* Deep Indigo — ALLE tekst */
  --merk-nacht: #0E0A1F;          /* Midnight Purple — spaarzaam */

  /* --------------------------------------------------------- rolkleuren */
  /* Namen naar functie, zodat site.css nooit een kleur hoeft te "kiezen". */
  --merk-tekst: var(--merk-indigo);
  --merk-tekst-zacht: #6E6389;           /* indigo verzacht, blijft leesbaar */
  --merk-tekst-op-roze: var(--merk-nacht);
  --merk-grond: var(--merk-roze-wolk);
  --merk-vlak: var(--merk-wit);
  --merk-vlak-zacht: var(--merk-wit-zacht);
  --merk-vlak-hover: var(--merk-roze-wolk);
  --merk-rand: var(--merk-roze-zacht);
  --merk-rand-zacht: #FFE0F1;
  --merk-live: #FF3D8B;                  /* verzadigder roze; leest als "nu" */
  --merk-goed: #3FBF8F;

  /* ---------------------------------------------------------- typografie */
  /* Poppins staat lokaal in fonts/ — geen Google Fonts, geen extern verzoek. */
  --merk-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --merk-font-kop: var(--merk-font);
  --merk-font-cijfer: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --merk-kop-gewicht: 700;
  --merk-tussenkop-gewicht: 600;
  --merk-kop-spatie: -0.015em;

  /* --------------------------------------------------------------- vorm */
  /* Het brandbook gebruikt overal royale rondingen. */
  --merk-radius: 18px;
  --merk-radius-klein: 12px;
  --merk-radius-groot: 28px;
  --merk-randbreedte: 1.5px;

  /* ------------------------------------------------------------ diepte */
  /* Zachte, roze schaduwen — geen grijs, dat maakt een licht ontwerp vuil. */
  --merk-schaduw: 0 18px 40px rgba(255, 110, 182, 0.16);
  --merk-schaduw-zacht: 0 6px 18px rgba(255, 110, 182, 0.12);
  --merk-gloed-rgb: 255, 110, 182;

  /* -------------------------------------------------------------- ritme */
  --merk-maat: 1100px;
  --merk-ruimte: clamp(1rem, 3vw, 2rem);
  --merk-sectie: clamp(3rem, 7vw, 5rem);
}