:root {
    --ui-color-light-normal: hsl(39, 30%, 95%);
    --ui-color-light-hover: hsl(39, 30%, 90%);
    --ui-color-light-active: hsl(39, 30%, 95%);
    --ui-color-light-disabled: hsla(39, 30%, 95%, 0.2);

    --ui-color-dark-normal: hsl(274, 75%, 8%);
    --ui-color-dark-hover: hsl(274, 75%, 13%);
    --ui-color-dark-active: hsl(274, 75%, 8%);
    --ui-color-dark-disabled: hsla(274, 75%, 8%, 0.2);

    --ui-button-solid-font-color-accent-normal: var(--ui-color-dark-normal);
    --ui-button-solid-font-color-accent-hover: var(--ui-color-dark-hover);
    --ui-button-solid-font-color-accent-active: var(--ui-color-dark-active);
    --ui-button-solid-font-color-accent-disabled: var(--ui-color-dark-disabled);

    --ui-tabs-selected-font-color-normal: var(--ui-color-dark-normal);
    --ui-tabs-selected-font-color-hover: var(--ui-color-dark-hover);
    --ui-tabs-selected-font-color-active: var(--ui-color-dark-active);
}

:root[data-theme="dark"] {
    --ui-color-secondary-normal: hsl(274, 50%, 60%);
    --ui-color-secondary-hover: hsl(274, 50%, 65%);
    --ui-color-secondary-active: hsl(274, 50%, 60%);
    --ui-color-secondary-disabled: hsla(274, 50%, 60%, 0.2);

    --ui-color-muted-normal: hsl(274, 75%, 30%);
    --ui-color-muted-hover: hsl(274, 75%, 35%);
    --ui-color-muted-active: hsl(274, 75%, 30%);
    --ui-color-muted-disabled: hsla(274, 75%, 30%, 0.2);

    --ui-color-accent-normal: hsl(39, 100%, 47%);
    --ui-color-accent-hover: hsl(39, 100%, 52%);
    --ui-color-accent-active: hsl(39, 100%, 47%);
    --ui-color-accent-disabled: hsla(39, 100%, 47%, 0.2);

    --ui-color-canvas: hsl(274, 75%, 15%);
    --ui-color-surface: hsl(274, 75%, 20%);

    --ui-color-elevated-normal: hsl(274, 75%, 25%);
    --ui-color-elevated-danger: color-mix(in hsl, var(--ui-color-danger-normal) 10%, var(--ui-color-elevated-normal));
    --ui-color-elevated-warning: color-mix(in hsl, var(--ui-color-warning-normal) 10%, var(--ui-color-elevated-normal));
    --ui-color-elevated-success: color-mix(in hsl, var(--ui-color-success-normal) 10%, var(--ui-color-elevated-normal));
}

:root[data-theme="light"] {
    --ui-color-secondary-normal: hsl(225, 10%, 50%);
    --ui-color-secondary-hover: hsl(225, 10%, 45%);
    --ui-color-secondary-active: hsl(225, 10%, 50%);
    --ui-color-secondary-disabled: hsla(225, 10%, 50%, 0.2);

    --ui-color-muted-normal: hsl(225, 20%, 84%);
    --ui-color-muted-hover: hsl(225, 30%, 80%);
    --ui-color-muted-active: hsl(225, 20%, 84%);
    --ui-color-muted-disabled: hsla(225, 20%, 84%, 0.2);

    --ui-color-accent-normal: hsl(39, 100%, 47%);
    --ui-color-accent-hover: hsl(39, 100%, 52%);
    --ui-color-accent-active: hsl(39, 100%, 47%);
    --ui-color-accent-disabled: hsla(39, 100%, 47%, 0.2);


    --ui-color-canvas: hsl(225, 30%, 90%);
    --ui-color-surface: hsl(225, 30%, 94%);

    --ui-color-elevated-normal: hsl(225, 0%, 90%);
    --ui-color-elevated-danger: color-mix(in hsl, var(--ui-color-danger-normal) 25%, #fff);
    --ui-color-elevated-warning: color-mix(in hsl, var(--ui-color-warning-normal) 25%, #fff);
    --ui-color-elevated-success: color-mix(in hsl, var(--ui-color-success-normal) 25%, #fff);
}