:root {
    --theme-color--grape-50: #f3edfa;
    --theme-color--grape-75: #f0e8f9;
    --theme-color--grape-100: #e1d1f3; /* tertiary, accent purple */
    --theme-color--grape-200: #d2b9ee;
    --theme-color--grape-300: #c3a2e8;
    --theme-color--grape-400: #b48be2;
    --theme-color--grape-500: #955dd6;
    --theme-color--grape-600: #8645d1;
    --theme-color--grape-700: #772ecb;
    --theme-color--grape-800: #6817C5; /* primary brand color */
    --theme-color--grape-900: #53129e; /* secondary, hover purple */
}

:root {
    /* Button Colors */
    --sc-color--button-bg--primary: var(--theme-color--grape-800);
    --sc-color--button-bg--primary-hover: var(--theme-color--grape-900);
    --sc-color--button-text: var(--sc-color--white);

    /* Account & Navigation Colors */
    --sc-color--nav-hover: var(--theme-color--grape-100);
    --sc-color--active-nav-item: var(--theme-color--grape-200);
    --sc-color--active-nav-item--hover: var(--theme-color--grape-100);

    /* Icons */
    --sc-color--throbber: var(--sc-color--button-bg--primary);

    /* Link */
    --link--color-visited: var(--sc-color--white)
}