html:root {
    --color-brand-primary: #754C8E;
    --color-button-bg: #754C8E;
    --color-menu-bg: #187A74;
    --color-menu-text: #FFFFFF;
    --color-icon-tile: #E3F4F2;
    --color-icon-glyph: #1F918A;
    --color-surface-page: #F2F2F2;
    --color-surface-card: #FFFFFF;
    --color-text-heading: #32373C;
    --color-text-body: #32373C;
    --color-text-dark: #32373C;
    --color-text-emphasis: #32373C;
    --color-border: #DDE3E2;
    --color-divider: #DDE3E2;
    --color-brand-soft: #46D6AC;
    --color-brand-deep: #1F918A;
    --color-brand-navy: #754C8E;
    --color-brand-primary-hover: color-mix(in srgb, var(--color-button-bg) 80%, black);
    --color-button-text: #ffffff;
    --color-icon-tile-soft: color-mix(in srgb, var(--color-icon-tile) 18%, transparent);
    --color-menu-accent: #46D6AC;
    --color-message-info-bg: color-mix(in srgb, var(--color-brand-primary) 25%, white);
    --color-message-info-text: color-mix(in srgb, var(--color-brand-primary) 40%, black);
    --color-info-solid-bg: var(--color-brand-primary);
    --color-info-solid-text: #ffffff;
    --color-focus-ring: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    --color-text-secondary: color-mix(in srgb, var(--color-text-body) 75%, var(--color-surface-page));
    --color-text-muted: color-mix(in srgb, var(--color-text-body) 65%, var(--color-surface-page));
    --color-text-tertiary: color-mix(in srgb, var(--color-text-body) 65%, var(--color-surface-page));
    --color-text-placeholder: color-mix(in srgb, var(--color-text-body) 55%, var(--color-surface-page));
}

html[data-theme="dark"]:root {
    --color-brand-primary: #754C8E;
    --color-button-bg: #754C8E;
    --color-menu-bg: #187A74;
    --color-menu-text: #FFFFFF;
    --color-icon-tile: #E3F4F2;
    --color-icon-glyph: #1F918A;
    --color-surface-page: #F2F2F2;
    --color-surface-card: #FFFFFF;
    --color-text-heading: #32373C;
    --color-text-body: #32373C;
    --color-text-dark: #32373C;
    --color-text-emphasis: #32373C;
    --color-border: #DDE3E2;
    --color-divider: #DDE3E2;
    --color-brand-soft: #46D6AC;
    --color-brand-deep: #1F918A;
    --color-brand-navy: #754C8E;
    --color-brand-primary-hover: color-mix(in srgb, var(--color-button-bg) 80%, white);
    --color-button-text: #ffffff;
    --color-icon-tile-soft: color-mix(in srgb, var(--color-icon-tile) 18%, transparent);
    --color-menu-accent: #46D6AC;
    --color-message-info-bg: color-mix(in srgb, var(--color-brand-primary) 25%, white);
    --color-message-info-text: color-mix(in srgb, var(--color-brand-primary) 40%, black);
    --color-info-solid-bg: var(--color-brand-primary);
    --color-info-solid-text: #ffffff;
    --color-focus-ring: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
    --color-text-secondary: color-mix(in srgb, var(--color-text-body) 75%, var(--color-surface-page));
    --color-text-muted: color-mix(in srgb, var(--color-text-body) 65%, var(--color-surface-page));
    --color-text-tertiary: color-mix(in srgb, var(--color-text-body) 65%, var(--color-surface-page));
    --color-text-placeholder: color-mix(in srgb, var(--color-text-body) 55%, var(--color-surface-page));
}