:root {
    /* Brand greens */
    --green-50:  #f1f8f3;
    --green-100: #e2f0e7;
    --green-200: #c5e1cf;
    --green-400: #6fbf86;
    --green-500: #4caf6a;
    --green-600: #2f9a52;
    --green-700: #237a40;

    /* Region accents (match the three pills in the concept) */
    --region-noord:    #6fbf86;  /* light green */
    --region-roermond: #2bb6a3;  /* teal */
    --region-zuid:     #3b7dd8;  /* blue */

    /* Neutrals */
    --grey-50:  #f7f8f9;
    --grey-100: #eef0f2;
    --grey-200: #dde1e5;
    --grey-400: #9aa3ab;
    --grey-600: #5b6770;
    --grey-800: #2a323a;
    --grey-900: #161b20;

    --bg:        #ffffff;
    --bg-soft:   var(--green-50);
    --text:      var(--grey-800);
    --text-soft: var(--grey-600);
    --border:    var(--grey-200);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-eyebrow: 0.78rem;
    --fs-body:    1rem;
    --fs-lead:    1.0625rem;
    --fs-h3:      1.125rem;
    --fs-h1:      2.5rem;

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Layout */
    --content-max: 1140px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.05);
    --shadow-md: 0 4px 16px rgba(20, 30, 40, 0.08);
}