/**
 * Regilo Design Tokens
 * Centrale plek voor alle kleuren en fonts.
 * Pas hier aan — nergens anders hardcoded kleuren gebruiken.
 */

:root {

  /* =====================
     KLEUREN — BASISPALET
     ===================== */
  --color-green:      #55E199;  /* Primaire accent */
  --color-blue-grey:  #8da1c3;  /* Secondair */
  --color-yellow:     #feef4e;  /* Accent */
  --color-dark-grey:  #4a4d56;  /* Tekst / donkere achtergronden */

  /* ==========================
     KLEUREN — ACHTERGRONDPALET
     ========================== */
  --color-dark-blue:  #4f618c;  /* Donkere secties */
  --color-lavender:   #c8c9ed;  /* Lichte achtergrond */
  --color-light-blue: #c1dae9;  /* Lichte achtergrond alt */

  /* =================
     KLEUREN — NEUTRAAL
     ================= */
  --color-white:      #ffffff;
  --color-black:      #000000;

  /* ==================
     KLEUREN — AFGELEID
     ================== */
  --color-green-light:    color-mix(in srgb, var(--color-green) 15%, white);
  --color-green-dark:     color-mix(in srgb, var(--color-green) 70%, black);

  /* =============
     TYPOGRAFIE
     ============= */
  --font-title:   'Replica Pro',       'Inter', 'Work Sans', sans-serif;
  --font-heading: 'Favorit Pro',       'Inter', 'Work Sans', sans-serif;
  --font-body:    'Favorit Pro Book',  'Inter', system-ui,   sans-serif;
}