:root{
--color-violet:#5b4fff;
--color-magenta:#ff3cac;
--color-mint:#00f0a0;
--color-yellow:#ffe14d;
--color-white:#ffffff;
--color-black:#0a0a0a;
--color-surface:#1e1e1e;
--color-card-bg:#141414;
--color-border:#2a2a2a;
--color-subtle-text:#7a7a7a;
--bg-page:var(--color-black);
--bg-surface:var(--color-surface);
--bg-card:var(--color-card-bg);
--border-default:var(--color-border);
--text-primary:var(--color-white);
--text-secondary:var(--color-subtle-text);
--text-on-brand:var(--color-white);
--brand-primary:var(--color-violet);
--brand-accent:var(--color-magenta);
--brand-pop-mint:var(--color-mint);
--brand-pop-yellow:var(--color-yellow);
--state-success:var(--color-mint);
--state-warning:var(--color-yellow);
--state-attention:var(--color-magenta);
--focus-ring:var(--color-violet);
}