/* Design tokens — BVRio brand palette + spacing/typography scale. */
:root {
    /* --- BVRio primary colours --- */
    --c-green: #AFCA0B;
    --c-blue: #0BBBEF;
    --c-yellow: #FDC300;
    --c-navy: #0B2D44;
    --c-black: #000000;
    --c-white: #FFFFFF;

    /* --- BVRio secondary colours (never dominate the primary ones) --- */
    --c-green-dark: #007C34;
    --c-blue-dark: #004F7C;
    --c-gray: #9D9D9C;
    /* Derived shade (not a BVRio brand colour): hover state for green buttons. */
    --c-green-hover: #9CB50A;
    /* Derived readable gold (brand yellow #FDC300 is unreadable as text on white). */
    --c-yellow-dark: #8A6D00;

    /* --- Waterfall stage colours (Footprint > Recycled > Collected > Certificates > Gap) --- */
    --stage-footprint: var(--c-navy);
    --stage-recycled: var(--c-green);
    --stage-collected: var(--c-blue);
    --stage-certificates: var(--c-yellow);
    --stage-gap: var(--c-gray);

    /* --- Source breakdown colours: Staff / Buildings / Products (B2B). Same yellow-blue-green
       scheme as the three step cards on the organisation info page, so the sources read the same
       from the pitch through to the result. (Token names still say scope — so do the DTO fields.) */
    --scope-1: var(--c-yellow);
    --scope-2: var(--c-blue);
    --scope-3: var(--c-green);

    /* --- Semantic colours --- */
    --color-bg: #f5f8f9;
    --color-surface: #ffffff;
    --color-text: #12232e;
    --color-text-muted: #5b6b76;
    --color-border: #e2e8ec;
    --color-primary: var(--c-navy);
    --color-accent: var(--c-green);

    /* --- Typography --- */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-100: 0.8125rem;
    --fs-200: 0.9375rem;
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;

    /* --- 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;

    /* --- Radius, shadow, layout --- */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(11, 45, 68, 0.06), 0 1px 3px rgba(11, 45, 68, 0.08);
    --shadow: 0 8px 24px rgba(11, 45, 68, 0.12);
    --container: 1120px;
}