:root {
    --color-background-gradient-start: hsl(209deg 40% 50%);
    --color-background-gradient-end: hsl(210deg 48% 69%);
    /* This is the same color as set on `--color-table-background` in
       comparison_table.css. */
    --color-background-marketing-page: hsl(0deg 0% 100% / 80%);
    /* This is a legacy color previously set on .why-page divs. */
    --color-text-marketing-page: hsl(223deg 6% 25%);
    --color-background-solid-hero: var(--color-background-gradient-start);
    --color-text-hero: hsl(0deg 0% 100%);
    --font-ss3: "Source Sans 3 VF", sans-serif;
    --font-ops: "Open Sans Variable", sans-serif;
    --color-background-box: hsl(210deg 44% 92%);
    --color-background-box-muted: hsl(0deg 0% 100% / 50%);
    --color-background-box-muted-hover: hsl(0deg 0% 100% / 60%);
    --color-plan-tab-header: hsl(223deg 40% 30%);
    --color-plan-tab-copy: hsl(223deg 40% 25% / 70%);
    --color-box-header: hsl(223deg 43% 25%);
    --color-box-copy: hsl(223deg 43% 25%);
    --color-box-copy-fine-print: hsl(223deg 43% 55%);
    --color-link: hsl(210deg 94% 42%);
    --color-link-hover: hsl(210deg 100% 50%);
    --color-link-portico-auth: hsl(200deg 100% 40%);
    --color-link-portico-auth-hover: hsl(200deg 100% 25%);
    --color-link-underline: hsl(210deg 94% 42% / 30%);
    --color-link-underline-hover: hsl(210deg 100% 50%);
    --color-link-underline-alternate: hsl(210deg 94% 100% / 40%);
    --color-link-underline-alternate-hover: hsl(210deg 94% 100% / 80%);
    --color-prominent-border: var(--color-link);
    --color-action-button: hsl(240deg 66% 60%);
    --color-action-button-hover: hsl(240deg 66% 55%);
    --color-action-button-active: hsl(240deg 66% 50%);
    --color-action-button-subtle-hover: hsl(240deg 66% 97%);
    --color-action-button-subtle-active: hsl(240deg 66% 94%);

    @media (prefers-color-scheme: dark) {
        --color-background-gradient-start: hsl(209deg 63% 40%);
        --color-background-gradient-end: hsl(238deg 28% 50%);
    }
}