/* One source for the interface palette: #5827ac mixed only with white or black.
 * Hex values support older browsers; color-mix keeps modern browsers tied to the base.
 */
:root {
    --brand-purple:#5827ac;
    --purple-50:#f8f6fc;
    --purple-100:#eee9f7;
    --purple-200:#ded4ee;
    --purple-300:#c5b3e2;
    --purple-400:#a388d1;
    --purple-500:#7952bd;
    --purple-600:#5827ac;
    --purple-700:#4b2192;
    --purple-800:#391970;
    --purple-850:#2c1456;
    --purple-900:#1f0e3c;
    --purple-925:#190b30;
    --purple-950:#120822;
    --purple-975:#0b0516;
    --bg:var(--purple-950);
    --surface:var(--purple-925);
    --surface-2:var(--purple-900);
    --footer-bg:var(--purple-975);
    --text:var(--purple-50);
    --muted:var(--purple-300);
    --line:var(--purple-800);
    --purple:var(--brand-purple);
    --purple-hover:var(--purple-500);
    --lilac:var(--purple-300);
    --pale-purple:var(--purple-100);
    --ink:var(--purple-900);
    --button-bg:var(--purple-200);
    --button-fg:var(--purple-900);
    --interaction-shadow:0 8px 24px #5827ac2e, 0 0 16px #a388d12e;
    --font:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --gutter:clamp(22px,4.5vw,72px);
}
@supports (color:color-mix(in srgb, white, black)) {
    :root {
        --purple-50:color-mix(in srgb, var(--brand-purple) 4%, white);
        --purple-100:color-mix(in srgb, var(--brand-purple) 10%, white);
        --purple-200:color-mix(in srgb, var(--brand-purple) 20%, white);
        --purple-300:color-mix(in srgb, var(--brand-purple) 35%, white);
        --purple-400:color-mix(in srgb, var(--brand-purple) 55%, white);
        --purple-500:color-mix(in srgb, var(--brand-purple) 80%, white);
        --purple-600:color-mix(in srgb, var(--brand-purple) 100%, black);
        --purple-700:color-mix(in srgb, var(--brand-purple) 85%, black);
        --purple-800:color-mix(in srgb, var(--brand-purple) 65%, black);
        --purple-850:color-mix(in srgb, var(--brand-purple) 50%, black);
        --purple-900:color-mix(in srgb, var(--brand-purple) 35%, black);
        --purple-925:color-mix(in srgb, var(--brand-purple) 28%, black);
        --purple-950:color-mix(in srgb, var(--brand-purple) 20%, black);
        --purple-975:color-mix(in srgb, var(--brand-purple) 13%, black);
        --interaction-shadow:0 8px 24px color-mix(in srgb, var(--brand-purple) 18%, transparent), 0 0 16px color-mix(in srgb, var(--purple-400) 18%, transparent);
    }
}