:root{
--purple-heart:#9659ff;
--purple-100:#f6eeff;
--purple-200:#edddff;
--purple-300:#e4cdff;
--purple-400:#dabcff;
--purple-500:#d0acff;
--purple-600:#c69bff;
--purple-700:#bb8bff;
--purple-800:#af7bff;
--purple-900:#a36aff;
--purple-1000:#9659ff;
--inch-worm:#c0ff00;
--inch-worm-100:#fbffec;
--inch-worm-200:#f6ffd8;
--inch-worm-300:#f1ffc5;
--inch-worm-400:#ebffb1;
--inch-worm-500:#e5ff9d;
--inch-worm-600:#dfff88;
--inch-worm-700:#d8ff72;
--inch-worm-800:#d0ff5a;
--inch-worm-900:#c8ff3d;
--inch-worm-1000:#c0ff00;
--black:#000000;
--white:#ffffff;
--gray-100:#f5f4f7;
--gray-200:#e6e4ec;
--gray-300:#cfccd9;
--gray-400:#a8a3b8;
--gray-500:#807a94;
--gray-600:#5c5670;
--gray-700:#413c52;
--gray-800:#2a2636;
--gray-900:#18151f;

--surface-page:var(--white);
--surface-inverse:var(--black);
--surface-card:var(--white);
--surface-sunken:var(--gray-100);
--surface-brand:var(--purple-heart);
--surface-accent:var(--inch-worm);

--text-primary:var(--black);
--text-inverse:var(--white);
--text-secondary:var(--gray-600);
--text-muted:var(--gray-500);
--text-brand:var(--purple-heart);
--text-on-brand:var(--white);
--text-on-accent:var(--black);

--border-default:var(--gray-200);
--border-strong:var(--black);
--border-brand:var(--purple-heart);

--focus-ring:var(--purple-heart);
}