{{--
    Chart colour tokens.

    Both modes are selected, not flipped: the dark column is the same four hues
    re-stepped for a dark surface. The ordering is the colour-blindness safety
    mechanism — validated with the adjacent-pair rule (worst CVD ΔE 9.1 light /
    8.4 dark, normal-vision ΔE 22.9 / 19.8), so slots are assigned in this fixed
    order and never cycled.

    Two light-mode slots sit below 3:1 against the surface, so every chart
    built on this palette ships direct labels and a table view — never colour
    alone.
--}}
<style>
    .viz {
        --viz-surface: #ffffff;
        --viz-grid: #e5e7eb;
        --viz-axis: #94a3b8;
        --viz-text: #0f172a;
        --viz-text-muted: #64748b;

        --series-1: #2a78d6;
        --series-2: #eb6834;
        --series-3: #1baf7a;
        --series-4: #eda100;
    }

    .dark .viz {
        --viz-surface: #0f172a;
        --viz-grid: #1e293b;
        --viz-axis: #475569;
        --viz-text: #f1f5f9;
        --viz-text-muted: #94a3b8;

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
    }

    .viz-bar { transition: opacity .15s; }
    .viz:hover .viz-bar { opacity: .55; }
    .viz .viz-bar:hover { opacity: 1; }
</style>