/* Each palette has separately chosen light and dark colours. Print styles stay neutral. */
@media screen {
    :root[data-colour], [data-colour-choice] { --palette-light-sidebar-neutral: #343941; }
    :root[data-colour="emerald"], [data-colour-choice="emerald"] {
        --palette-light-primary: #047857;
        --palette-light-sidebar: #064e3b;
        --palette-light-canvas: #edf8f1;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #6ee7b7;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #34d399;
        --palette-dark-sidebar: #04392c;
        --palette-dark-canvas: #061f19;
        --palette-dark-surface: #10372b;
        --palette-dark-highlight: #34d399;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="blue"], [data-colour-choice="blue"] {
        --palette-light-primary: #1d4ed8;
        --palette-light-sidebar: #172554;
        --palette-light-canvas: #eff6ff;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #60a5fa;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #60a5fa;
        --palette-dark-sidebar: #0b1e46;
        --palette-dark-canvas: #071426;
        --palette-dark-surface: #10223e;
        --palette-dark-highlight: #60a5fa;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="violet"], [data-colour-choice="violet"] {
        --palette-light-primary: #6d28d9;
        --palette-light-sidebar: #3b0764;
        --palette-light-canvas: #f5f0ff;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #c4b5fd;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #a78bfa;
        --palette-dark-sidebar: #270642;
        --palette-dark-canvas: #1b0b2b;
        --palette-dark-surface: #301547;
        --palette-dark-highlight: #a78bfa;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="teal"], [data-colour-choice="teal"] {
        --palette-light-primary: #0f766e;
        --palette-light-sidebar: #134e4a;
        --palette-light-canvas: #edfafa;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #5eead4;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #2dd4bf;
        --palette-dark-sidebar: #073e3b;
        --palette-dark-canvas: #041f20;
        --palette-dark-surface: #0b3434;
        --palette-dark-highlight: #2dd4bf;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="rose"], [data-colour-choice="rose"] {
        --palette-light-primary: #be123c;
        --palette-light-sidebar: #4c0519;
        --palette-light-canvas: #fff1f2;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #fda4af;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #fb7185;
        --palette-dark-sidebar: #4c0d24;
        --palette-dark-canvas: #270d19;
        --palette-dark-surface: #421625;
        --palette-dark-highlight: #fb7185;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="amber"], [data-colour-choice="amber"] {
        --palette-light-primary: #92400e;
        --palette-light-sidebar: #78350f;
        --palette-light-canvas: #fffbeb;
        --palette-light-surface: #fffdf5;
        --palette-light-highlight: #fcd34d;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #fbbf24;
        --palette-dark-sidebar: #4a2c0b;
        --palette-dark-canvas: #251c06;
        --palette-dark-surface: #3b2c0d;
        --palette-dark-highlight: #fbbf24;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="cyan"], [data-colour-choice="cyan"] {
        --palette-light-primary: #0e7490;
        --palette-light-sidebar: #164e63;
        --palette-light-canvas: #ecfeff;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #67e8f9;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #22d3ee;
        --palette-dark-sidebar: #06374a;
        --palette-dark-canvas: #041d2b;
        --palette-dark-surface: #0c3445;
        --palette-dark-highlight: #22d3ee;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="indigo"], [data-colour-choice="indigo"] {
        --palette-light-primary: #3730a3;
        --palette-light-sidebar: #1e1b4b;
        --palette-light-canvas: #eef2ff;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #a5b4fc;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #818cf8;
        --palette-dark-sidebar: #1b1744;
        --palette-dark-canvas: #0e1028;
        --palette-dark-surface: #1d2042;
        --palette-dark-highlight: #818cf8;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="orange"], [data-colour-choice="orange"] {
        --palette-light-primary: #c2410c;
        --palette-light-sidebar: #7c2d12;
        --palette-light-canvas: #fff7ed;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #fdba74;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #fb923c;
        --palette-dark-sidebar: #51250b;
        --palette-dark-canvas: #291508;
        --palette-dark-surface: #42250f;
        --palette-dark-highlight: #fb923c;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="ruby"], [data-colour-choice="ruby"] {
        --palette-light-primary: #b91c1c;
        --palette-light-sidebar: #450a0a;
        --palette-light-canvas: #fef2f2;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #fca5a5;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #f87171;
        --palette-dark-sidebar: #38060b;
        --palette-dark-canvas: #200608;
        --palette-dark-surface: #3d1114;
        --palette-dark-highlight: #f87171;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="lime"], [data-colour-choice="lime"] {
        --palette-light-primary: #3f6212;
        --palette-light-sidebar: #365314;
        --palette-light-canvas: #f7fee7;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #bef264;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #a3e635;
        --palette-dark-sidebar: #243d09;
        --palette-dark-canvas: #151f06;
        --palette-dark-surface: #293810;
        --palette-dark-highlight: #a3e635;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="slate"], [data-colour-choice="slate"] {
        --palette-light-primary: #475569;
        --palette-light-sidebar: #334155;
        --palette-light-canvas: #f1f5f9;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #cbd5e1;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #94a3b8;
        --palette-dark-sidebar: #253448;
        --palette-dark-canvas: #0f172a;
        --palette-dark-surface: #1e293b;
        --palette-dark-highlight: #cbd5e1;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="sky"], [data-colour-choice="sky"] {
        --palette-light-primary: #0369a1;
        --palette-light-sidebar: #075985;
        --palette-light-canvas: #e0f2fe;
        --palette-light-surface: #f5fbff;
        --palette-light-highlight: #bae6fd;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #38bdf8;
        --palette-dark-sidebar: #075179;
        --palette-dark-canvas: #062438;
        --palette-dark-surface: #104460;
        --palette-dark-highlight: #7dd3fc;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="mint"], [data-colour-choice="mint"] {
        --palette-light-sidebar-neutral: #dce3df;
        --palette-light-primary: #065f46;
        --palette-light-sidebar: #ccf6e8;
        --palette-light-canvas: #e9fff5;
        --palette-light-surface: #f7fffb;
        --palette-light-highlight: #065f46;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #111827;
        --palette-light-on-highlight: #ffffff;
        --palette-dark-primary: #6ee7b7;
        --palette-dark-sidebar: #285b4c;
        --palette-dark-canvas: #0a2923;
        --palette-dark-surface: #17483b;
        --palette-dark-highlight: #a7f3d0;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="forest"], [data-colour-choice="forest"] {
        --palette-light-primary: #276138;
        --palette-light-sidebar: #183521;
        --palette-light-canvas: #f1f3e8;
        --palette-light-surface: #fbfcf6;
        --palette-light-highlight: #c2d1a3;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #86b66a;
        --palette-dark-sidebar: #183521;
        --palette-dark-canvas: #101b12;
        --palette-dark-surface: #213323;
        --palette-dark-highlight: #bdd49b;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="olive"], [data-colour-choice="olive"] {
        --palette-light-primary: #606323;
        --palette-light-sidebar: #414621;
        --palette-light-canvas: #f5f2df;
        --palette-light-surface: #fffdf2;
        --palette-light-highlight: #d1d98c;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #cad66a;
        --palette-dark-sidebar: #343a18;
        --palette-dark-canvas: #22220f;
        --palette-dark-surface: #393b1d;
        --palette-dark-highlight: #cad66a;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="gold"], [data-colour-choice="gold"] {
        --palette-light-primary: #7c5d08;
        --palette-light-sidebar: #191919;
        --palette-light-canvas: #fff8db;
        --palette-light-surface: #fffdf1;
        --palette-light-highlight: #facc15;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #facc15;
        --palette-dark-sidebar: #050505;
        --palette-dark-canvas: #121212;
        --palette-dark-surface: #242424;
        --palette-dark-highlight: #facc15;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="copper"], [data-colour-choice="copper"] {
        --palette-light-primary: #944b2d;
        --palette-light-sidebar: #4a2c25;
        --palette-light-canvas: #f7eee7;
        --palette-light-surface: #fff9f4;
        --palette-light-highlight: #e6b08e;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #d99a75;
        --palette-dark-sidebar: #3e2821;
        --palette-dark-canvas: #261916;
        --palette-dark-surface: #453029;
        --palette-dark-highlight: #d99a75;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="coral"], [data-colour-choice="coral"] {
        --palette-light-primary: #b53527;
        --palette-light-sidebar: #723e4e;
        --palette-light-canvas: #fff0e8;
        --palette-light-surface: #fffaf6;
        --palette-light-highlight: #ffb39b;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #ff8a76;
        --palette-dark-sidebar: #643d4c;
        --palette-dark-canvas: #331e25;
        --palette-dark-surface: #52303c;
        --palette-dark-highlight: #ffb39b;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="pink"], [data-colour-choice="pink"] {
        --palette-light-primary: #be185d;
        --palette-light-sidebar: #831843;
        --palette-light-canvas: #fdf2f8;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #f9a8d4;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #f9a8d4;
        --palette-dark-sidebar: #6d1b52;
        --palette-dark-canvas: #2b0b25;
        --palette-dark-surface: #4a153e;
        --palette-dark-highlight: #f9a8d4;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="fuchsia"], [data-colour-choice="fuchsia"] {
        --palette-light-primary: #a21caf;
        --palette-light-sidebar: #4a044e;
        --palette-light-canvas: #fdf4ff;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #f0abfc;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #e879f9;
        --palette-dark-sidebar: #44064d;
        --palette-dark-canvas: #25052d;
        --palette-dark-surface: #410e49;
        --palette-dark-highlight: #e879f9;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="plum"], [data-colour-choice="plum"] {
        --palette-light-primary: #713859;
        --palette-light-sidebar: #3e2039;
        --palette-light-canvas: #f5edf2;
        --palette-light-surface: #fff9fc;
        --palette-light-highlight: #d8b7c9;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #d799bc;
        --palette-dark-sidebar: #322330;
        --palette-dark-canvas: #241a28;
        --palette-dark-surface: #3e2b43;
        --palette-dark-highlight: #d8b7c9;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="lavender"], [data-colour-choice="lavender"] {
        --palette-light-sidebar-neutral: #e3e0e8;
        --palette-light-primary: #6b4e9b;
        --palette-light-sidebar: #e8def7;
        --palette-light-canvas: #f6f2ff;
        --palette-light-surface: #fdfbff;
        --palette-light-highlight: #6b4e9b;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #111827;
        --palette-light-on-highlight: #ffffff;
        --palette-dark-primary: #c4b5fd;
        --palette-dark-sidebar: #494065;
        --palette-dark-canvas: #24213e;
        --palette-dark-surface: #393352;
        --palette-dark-highlight: #ddd6fe;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }
    :root[data-colour="graphite"], [data-colour-choice="graphite"] {
        --palette-light-primary: #27272a;
        --palette-light-sidebar: #18181b;
        --palette-light-canvas: #f4f4f5;
        --palette-light-surface: #ffffff;
        --palette-light-highlight: #e4e4e7;
        --palette-light-on-primary: #ffffff;
        --palette-light-sidebar-ink: #ffffff;
        --palette-light-on-highlight: #111827;
        --palette-dark-primary: #fafafa;
        --palette-dark-sidebar: #000000;
        --palette-dark-canvas: #09090b;
        --palette-dark-surface: #18181b;
        --palette-dark-highlight: #fafafa;
        --palette-dark-on-primary: #111827;
        --palette-dark-sidebar-ink: #ffffff;
        --palette-dark-on-highlight: #111827;
    }

    :root[data-colour], [data-variant-choice="balanced"] {
        --variant-accent-strength: 75%;
        --variant-sidebar-strength: 80%;
        --variant-canvas-strength: 75%;
        --variant-surface-strength: 75%;
        --variant-dark-accent-strength: 60%;
        --variant-fill-strength: 32%;
        --variant-nav-strength: 12%;
        --variant-chart-strength: 30%;
        --variant-chart-current-strength: 65%;
    }
    :root[data-colour-variant="soft"], [data-variant-choice="soft"] {
        --variant-accent-strength: 55%;
        --variant-sidebar-strength: 45%;
        --variant-canvas-strength: 45%;
        --variant-surface-strength: 45%;
        --variant-dark-accent-strength: 40%;
        --variant-fill-strength: 24%;
        --variant-nav-strength: 8%;
        --variant-chart-strength: 23%;
        --variant-chart-current-strength: 50%;
    }
    :root[data-colour-variant="deep"], [data-variant-choice="deep"] {
        --variant-accent-strength: 92%;
        --variant-sidebar-strength: 95%;
        --variant-canvas-strength: 95%;
        --variant-surface-strength: 95%;
        --variant-dark-accent-strength: 75%;
        --variant-fill-strength: 40%;
        --variant-nav-strength: 18%;
        --variant-chart-strength: 40%;
        --variant-chart-current-strength: 78%;
    }
    /* Bases control surface relationships; colour families continue to supply accents. */
    :root, [data-base-choice="tinted"] {
        --base-tint: 100%;
        --base-sidebar-light: #fafbfc;
        --base-sidebar-dark: #202329;
        --base-sidebar-ink-light: #273242;
        --base-sidebar-ink-dark: #e7ebf2;
        --base-canvas-light: #f2f4f7;
        --base-canvas-dark: #17191e;
        --base-surface-light: #fff;
        --base-surface-dark: #24272e;
        --base-border-strength: 13%;
        --base-editor-border-strength: 31%;
        --base-neutral-nav: 0%;
        --base-contrast-highlight: 0%;
    }
    :root[data-theme-base="neutral"], [data-base-choice="neutral"] {
        --base-tint: 0%;
        --base-sidebar-light: #fafbfc;
        --base-sidebar-dark: #202329;
        --base-sidebar-ink-light: #273242;
        --base-sidebar-ink-dark: #e7ebf2;
        --base-canvas-light: #f2f4f7;
        --base-canvas-dark: #17191e;
        --base-surface-light: #fff;
        --base-surface-dark: #24272e;
        --base-border-strength: 13%;
        --base-editor-border-strength: 31%;
        --base-neutral-nav: 100%;
        --base-contrast-highlight: 0%;
    }
    :root[data-theme-base="contrast"], [data-base-choice="contrast"] {
        --base-tint: 0%;
        --base-sidebar-light: #18212f;
        --base-sidebar-dark: #0d121b;
        --base-sidebar-ink-light: #edf2fa;
        --base-sidebar-ink-dark: #edf2fa;
        --base-canvas-light: #e9edf2;
        --base-canvas-dark: #121923;
        --base-surface-light: #fff;
        --base-surface-dark: #242e3d;
        --base-border-strength: 24%;
        --base-editor-border-strength: 44%;
        --base-neutral-nav: 0%;
        --base-contrast-highlight: 100%;
    }
    :root[data-colour], [data-colour-choice], [data-variant-choice], [data-base-choice] {
        --accent-primary: color-mix(in srgb, var(--palette-light-primary) var(--variant-accent-strength), #4b5563);
        --accent-button: var(--accent-primary);
        --accent-on-primary: var(--palette-light-on-primary);
        --green-deep: color-mix(in srgb, color-mix(in srgb, var(--palette-light-sidebar) var(--variant-sidebar-strength), var(--palette-light-sidebar-neutral)) var(--base-tint), var(--base-sidebar-light));
        --accent-sidebar-ink: color-mix(in srgb, var(--palette-light-sidebar-ink) var(--base-tint), var(--base-sidebar-ink-light));
        --canvas: color-mix(in srgb, color-mix(in srgb, var(--palette-light-canvas) var(--variant-canvas-strength), #f3f4f6) var(--base-tint), var(--base-canvas-light));
        --white: color-mix(in srgb, color-mix(in srgb, var(--palette-light-surface) var(--variant-surface-strength), #fafafa) var(--base-tint), var(--base-surface-light));
        --lime: var(--palette-light-highlight);
        --accent-active-ink: var(--palette-light-on-highlight);
        --accent-nav-background: color-mix(in srgb, color-mix(in srgb, var(--accent-primary) 10%, var(--green-deep)) var(--base-neutral-nav), color-mix(in srgb, var(--accent-sidebar-ink) var(--variant-nav-strength), var(--green-deep)));
        --accent-nav-ink: var(--accent-sidebar-ink);
        --accent-sidebar-highlight: color-mix(in srgb, var(--accent-primary) var(--base-neutral-nav), color-mix(in srgb, color-mix(in srgb, var(--palette-dark-primary) 70%, #cbd5e1) var(--base-contrast-highlight), var(--lime)));
        --ink: #18212f;
        --muted: #526071;
        --accent-hover: color-mix(in srgb, var(--accent-primary) 86%, #000);
        --accent-button-hover: color-mix(in srgb, var(--accent-button) 88%, #000);
        --accent-button-pressed: color-mix(in srgb, var(--accent-button) 76%, #000);
        --accent-soft: color-mix(in srgb, var(--accent-primary) 9%, var(--white));
        --accent-soft-hover: color-mix(in srgb, var(--accent-primary) 16%, var(--white));
        --accent-line: color-mix(in srgb, var(--accent-primary) 30%, var(--white));
        --accent-focus: var(--accent-primary);
        --accent-focus-ring: color-mix(in srgb, var(--accent-primary) 22%, transparent);
        --accent-chart: color-mix(in srgb, var(--accent-primary) var(--variant-chart-strength), var(--white));
        --accent-chart-current: color-mix(in srgb, var(--accent-primary) var(--variant-chart-current-strength), var(--white));
        --accent-topbar: var(--white);
        --accent-input: var(--white);
        --accent-inset: color-mix(in srgb, var(--canvas) 70%, var(--white));
        --accent-sidebar-soft: color-mix(in srgb, var(--green-deep) 88%, var(--accent-sidebar-ink));
        --accent-sidebar-line: color-mix(in srgb, var(--green-deep) 70%, var(--accent-sidebar-ink));
        --accent-sidebar-text: color-mix(in srgb, var(--accent-sidebar-ink) 90%, var(--green-deep));
        --accent-sidebar-muted: color-mix(in srgb, var(--accent-sidebar-ink) 75%, var(--green-deep));
        --green: var(--accent-primary);
        --border: color-mix(in srgb, var(--ink) var(--base-border-strength), var(--white));
        --control-border: color-mix(in srgb, var(--ink) var(--base-editor-border-strength), var(--white));
        --control-hover-border: color-mix(in srgb, var(--accent-primary) 60%, var(--control-border));
        --control-hover-surface: color-mix(in srgb, var(--accent-primary) 3%, var(--white));
        --control-disabled-surface: color-mix(in srgb, var(--ink) 5%, var(--white));
        --control-disabled-ink: var(--muted);
        --row-hover: color-mix(in srgb, var(--accent-primary) 6%, var(--white));
        --theme-surface: var(--white);
        --theme-hover: var(--accent-soft);
        --theme-selected: var(--accent-soft-hover);
        --bs-primary: var(--accent-primary);
        --bs-body-color: var(--ink);
        --bs-body-bg: var(--canvas);
        --bs-heading-color: var(--ink);
        --bs-border-color: var(--border);
        --bs-emphasis-color: var(--ink);
        --bs-secondary-color: var(--muted);
        --bs-secondary-bg: var(--accent-soft);
        --bs-tertiary-bg: var(--accent-inset);
        --bs-link-color: var(--green);
        --bs-link-hover-color: var(--accent-hover);
    }
    :root[data-colour][data-bs-theme="dark"], [data-bs-theme="dark"] [data-colour-choice], [data-bs-theme="dark"] [data-variant-choice], [data-bs-theme="dark"] [data-base-choice] {
        --accent-primary: color-mix(in srgb, var(--palette-dark-primary) var(--variant-dark-accent-strength), #9ca3af);
        --accent-button: color-mix(in srgb, var(--palette-dark-primary) var(--variant-fill-strength), #101827);
        --accent-on-primary: #fff;
        --green-deep: color-mix(in srgb, color-mix(in srgb, var(--palette-dark-sidebar) var(--variant-sidebar-strength), #161b22) var(--base-tint), var(--base-sidebar-dark));
        --accent-sidebar-ink: color-mix(in srgb, var(--palette-dark-sidebar-ink) var(--base-tint), var(--base-sidebar-ink-dark));
        --canvas: color-mix(in srgb, color-mix(in srgb, var(--palette-dark-canvas) var(--variant-canvas-strength), #171a20) var(--base-tint), var(--base-canvas-dark));
        --white: color-mix(in srgb, color-mix(in srgb, var(--palette-dark-surface) var(--variant-surface-strength), #22262e) var(--base-tint), var(--base-surface-dark));
        --lime: var(--accent-primary);
        --accent-active-ink: var(--palette-dark-on-highlight);
        --ink: #f1f5f9;
        --muted: #b1bac8;
        --accent-hover: color-mix(in srgb, var(--accent-primary) 85%, #fff);
        --accent-soft: color-mix(in srgb, var(--accent-primary) 12%, var(--white));
        --accent-soft-hover: color-mix(in srgb, var(--accent-primary) 20%, var(--white));
    }

    [data-colour] :is(.brand, .auth-pitch h1) { color: var(--accent-sidebar-ink); }
    [data-colour] .brand-mark { color: var(--accent-active-ink); }
    [data-colour] a:hover { color: var(--accent-hover); }
    [data-colour] :is(.topbar, .auth-body) { background: var(--accent-topbar); }
    [data-colour] .auth-body { background: var(--canvas); }
    [data-colour] :is(.panel, .stat-card, .vehicle-card, .quick-actions>a) { background: var(--theme-surface); }
    [data-colour] :is(.sidebar-caption, .nav-heading, .auth-foot) { color: var(--accent-sidebar-muted); }
    [data-colour] .nav-item { color: var(--accent-sidebar-text); }
    [data-colour] .nav-item:hover { background: var(--accent-sidebar-soft); color: var(--accent-sidebar-ink); }
    [data-colour] .nav-item.active,
    [data-colour] .nav-item.active:hover { background: var(--accent-nav-background); color: var(--accent-nav-ink); box-shadow: inset 3px 0 0 var(--accent-sidebar-highlight); }
    [data-colour] .brand:hover { color: var(--accent-sidebar-ink); }
    [data-colour] .garage-note { background: var(--accent-sidebar-soft); border-color: var(--accent-sidebar-line); color: var(--accent-sidebar-text); }
    [data-colour] .garage-note strong { color: var(--accent-sidebar-ink); }
    [data-colour] :is(.auth-pitch .overline, .road-car) { color: var(--lime); }
    [data-colour] .auth-pitch>p { color: var(--accent-sidebar-text); }
    [data-colour] .road-car { background: var(--accent-sidebar-soft); border-color: var(--accent-sidebar-line); color: var(--accent-sidebar-highlight); }
    [data-colour] .road-line { border-color: var(--accent-sidebar-muted); }
    [data-colour] .road-point { background: var(--accent-sidebar-highlight); box-shadow: 0 0 0 6px var(--accent-sidebar-soft); }

    [data-colour] :is(.breadcrumb-text strong, .form-label, .check-label, .record-title a, .garage-vehicle, .breakdown-list strong) { color: var(--ink); }
    [data-colour] :is(.breadcrumb-text, .today, .stat-top, .stat-value small, .stat-caption, .panel-heading p, .quick-actions>span,
        .chart-grid>span, .chart-bar span, .bar-label, .chart-legend, .reminder-item small, .garage-vehicle>div span,
        .records-table td, .record-title small, .page-footer, .form-text, .check-label small, .filter-bar label, .table-summary,
        .vehicle-year, .vehicle-card-meta, .vehicle-card-stats small, .vehicle-card-stats strong span, .report-meta, .report-total small,
        .breakdown-list>div, .economy-row span, .empty-state, .empty-state p, .required-mark) { color: var(--muted); }
    [data-colour] :is(.overline, .text-link, .stat-caption a, .chart-legend a, .attachment-link, .reset-filter,
        .vehicle-card-link, .table-summary strong, .economy-row strong, .empty-state h3, .chart-bar.current span) { color: var(--green); }
    [data-colour] .amount { color: var(--ink) !important; }
    [data-colour] :is(.reminder-item, .panel-bottom-link, .garage-vehicle, .records-table th, .records-table td, .breakdown-list>div) { border-color: var(--border); }
    [data-colour] :is(.garage-vehicle, .document-mini, .panel-bottom-link, .table-summary, .records-table th, .audit-detail pre) { background: var(--accent-inset); }
    [data-colour] :is(.panel-bottom-link, .records-table th, .quick-actions>a, .icon-button, .table-action) { color: var(--muted); }
    [data-colour] :is(.icon-button:hover, .table-action:hover, .quick-actions>a:hover) { background: var(--theme-hover); color: var(--green); }
    [data-colour] .quick-actions>a:hover { border-color: var(--accent-line); }
    [data-colour] :is(.quick-actions>a svg:last-child, .search-field svg, .empty-state>svg, .document-mini>svg) { color: var(--green); }
    [data-colour] .avatar { background: var(--accent-soft); color: var(--green); border-color: var(--theme-surface); box-shadow: 0 0 0 1px var(--accent-line); }
    [data-colour] :is(.subtle-tag, .plate-small) { color: var(--green); background: var(--accent-soft); border-color: var(--accent-line); }
    [data-colour] :is(.count-pill, .section-number, .vehicle-symbol, .all-clear) { color: var(--green); background: var(--accent-soft); }

    [data-colour] :is(.form-control, .form-select, .auth-panel .form-control) { color: var(--ink); background-color: var(--accent-input); border-color: var(--control-border); }
    [data-colour] :is(.form-control, .form-select):hover:not(:disabled):not([readonly]):not(:focus):not(.is-invalid) { background-color: var(--control-hover-surface); border-color: var(--control-hover-border); }
    [data-colour] :is(.form-control:focus, .form-select:focus) { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-focus-ring); }
    [data-colour] .form-control::placeholder { color: var(--muted); }
    [data-colour] :is(.form-control[readonly], .form-control:disabled, .form-select:disabled) { background-color: var(--control-disabled-surface); color: var(--control-disabled-ink); }
    [data-colour] :is(.form-control, .form-select).is-invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }
    [data-colour] :is(.form-control, .form-select).is-invalid:focus { box-shadow: 0 0 0 3px #dc354533; }
    [data-colour] :is(button, a, summary, input, select, textarea):focus-visible { outline-color: var(--accent-focus); }
    [data-colour] .btn-primary {
        --bs-btn-color: var(--accent-on-primary); --bs-btn-bg: var(--accent-button); --bs-btn-border-color: var(--accent-button);
        --bs-btn-hover-color: var(--accent-on-primary); --bs-btn-hover-bg: var(--accent-button-hover); --bs-btn-hover-border-color: var(--accent-button-hover);
        --bs-btn-active-color: var(--accent-on-primary); --bs-btn-active-bg: var(--accent-button-pressed); --bs-btn-active-border-color: var(--accent-button-pressed);
        --bs-btn-disabled-color: var(--control-disabled-ink); --bs-btn-disabled-bg: var(--control-disabled-surface); --bs-btn-disabled-border-color: var(--border); --bs-btn-disabled-opacity: 1;
        --bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-focus-ring);
    }
    [data-colour] .btn-primary:hover { color: var(--accent-on-primary); }
    [data-colour] .btn-outline-secondary {
        background: transparent; --bs-btn-color: var(--ink); --bs-btn-border-color: var(--control-border);
        --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-focus);
        --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--ink);
    }
    [data-colour] .btn-outline-secondary:hover { background: var(--accent-soft); color: var(--ink); }

    [data-colour] .chart-grid>span:after { border-color: var(--border); }
    [data-colour] .chart-bar { background: var(--accent-chart); }
    [data-colour] .chart-bar.current, [data-colour] .chart-legend i { background: var(--accent-chart-current); }
    [data-colour] .vehicle-card-art { color: var(--green); background: radial-gradient(ellipse, var(--accent-soft), transparent 67%); }
    [data-colour] :is(.notice, .demo-check) { color: var(--green); background: var(--accent-soft); border-color: var(--accent-line); }
    [data-colour] .pagination {
        --bs-pagination-bg: var(--theme-surface); --bs-pagination-color: var(--green); --bs-pagination-border-color: var(--accent-line);
        --bs-pagination-hover-bg: var(--accent-soft); --bs-pagination-hover-color: var(--ink);
        --bs-pagination-active-color: var(--accent-on-primary); --bs-pagination-active-bg: var(--accent-button); --bs-pagination-active-border-color: var(--accent-button);
        --bs-pagination-disabled-bg: var(--accent-inset); --bs-pagination-disabled-color: var(--muted); --bs-pagination-disabled-border-color: var(--accent-line);
        --bs-pagination-focus-box-shadow: 0 0 0 3px var(--accent-focus-ring);
    }
}
