:root {
    /* ── Brand tints (computed from --brand set per-page) ── */
    --brand-dark:    color-mix(in srgb, var(--brand) 75%, #000);
    --brand-light:   color-mix(in srgb, var(--brand) 18%, #fff);
    --brand-lighter: color-mix(in srgb, var(--brand)  8%, #fff);
    --brand-border:  color-mix(in srgb, var(--brand) 28%, #fff);

    --brand-secondary-dark:    color-mix(in srgb, var(--brand-secondary) 75%, #000);
    --brand-secondary-light:   color-mix(in srgb, var(--brand-secondary) 18%, #fff);
    --brand-secondary-lighter: color-mix(in srgb, var(--brand-secondary)  8%, #fff);
    --brand-secondary-border:  color-mix(in srgb, var(--brand-secondary) 28%, #fff);

    /* ── Neutral palette ── */
    --color-bg:         #f0f2f5;
    --color-surface:    #fff;
    --color-surface-2:  #f9fafb;
    --color-border:     #e5e7eb;
    --color-border-mid: #d1d5db;
    --color-text:       #1a1a1a;
    --color-text-2:     #374151;
    --color-muted:      #6b7280;
    --color-faint:      #9ca3af;

    /* ── Semantic colours ── */
    --color-success-bg:   #e8f5e9;
    --color-success-text: #1e4520;
    --color-error-bg:     #fee2e2;
    --color-error-text:   #991b1b;
    --color-warning-bg:   #fef9c3;
    --color-warning-text: #854d0e;
    --color-info-bg:      #dbeafe;
    --color-info-text:    #1e40af;

    /* ── Typography ── */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.9rem;
    --text-md:   1rem;
    --text-lg:   1.15rem;
    --text-xl:   1.4rem;
    --text-2xl:  1.8rem;
    --text-3xl:  2.4rem;

    /* ── Spacing ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* ── Border-radius ── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  18px;
    --radius-pill: 99px;

    /* ── Shadows ── */
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.07);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl:    0 16px 40px rgba(0,0,0,0.13);
    --shadow-focus: 0 0 0 3px rgba(44,95,46,0.12);

    /* ── Transitions ── */
    --transition-fast: 0.12s ease;
    --transition-base: 0.18s ease;
    --transition-slow: 0.3s ease;
}