:root[data-theme="dark"] {
    --ui-color-primary-normal: hsl(185, 100%, 95%);
    --ui-color-primary-hover: hsl(185, 100%, 90%);
    --ui-color-primary-active: hsl(185, 100%, 95%);
    --ui-color-primary-disabled: hsla(185, 100%, 95%, 0.2);

    --ui-color-secondary-normal: hsl(185, 100%, 50%);
    --ui-color-secondary-hover: hsl(185, 100%, 60%);
    --ui-color-secondary-active: hsl(185, 100%, 50%);
    --ui-color-secondary-disabled: hsla(185, 100%, 50%, 0.2);

    --ui-color-muted-normal: hsl(255, 80%, 17%);
    --ui-color-muted-hover: hsl(255, 80%, 22%);
    --ui-color-muted-active: hsl(255, 80%, 17%);
    --ui-color-muted-disabled: hsla(255, 80%, 17%, 0.2);

    --ui-color-accent-normal: hsl(325, 100%, 50%);
    --ui-color-accent-hover: hsl(325, 100%, 60%);
    --ui-color-accent-active: hsl(325, 100%, 50%);
    --ui-color-accent-disabled: hsla(325, 100%, 50%, 0.2);

    --ui-color-canvas: hsl(240, 95%, 10%);
    --ui-color-surface: hsl(240, 95%, 12%);

    --ui-color-elevated-normal: hsl(240, 95%, 14%);
    --ui-color-elevated-danger: color-mix(in hsl, var(--ui-color-danger-normal) 20%, var(--ui-color-canvas));
    --ui-color-elevated-warning: color-mix(in hsl, var(--ui-color-warning-normal) 20%, var(--ui-color-canvas));
    --ui-color-elevated-success: color-mix(in hsl, var(--ui-color-success-normal) 20%, var(--ui-color-canvas));
}

:root[data-theme="light"] {
    --ui-color-primary-normal: hsl(240, 95%, 10%);
    --ui-color-primary-hover: hsl(240, 95%, 20%);
    --ui-color-primary-active: hsl(240, 95%, 10%);
    --ui-color-primary-disabled: hsla(240, 95%, 10%, 0.2);

    --ui-color-accent-normal: hsl(325, 100%, 50%);
    --ui-color-accent-hover: hsl(325, 100%, 60%);
    --ui-color-accent-active: hsl(325, 100%, 50%);
    --ui-color-accent-disabled: hsla(325, 100%, 50%, 0.2);
}

:root {
    --ui-radius-xs: 5px;
    --ui-radius-sm: 5px;
    --ui-radius-md: 5px;
    --ui-radius-lg: 5px;
    --ui-radius-xl: 5px;

    --ui-button-radius: 5px;
    --ui-tabs-radius: 5px;
}

[data-type="button"] {
    transition: all var(--ui-transition-duration) var(--ui-transition-duration);
}

[data-type="button"][data-variant="solid"][data-color="accent"],
[data-type="icon-button"][data-variant="solid"][data-color="accent"],
[data-type="tabs-trigger"][data-state="active"] {
    box-shadow: 0px 0px 5px hsla(325, 100%, 80%, 0.5);
}

[data-type="button"][data-variant="solid"][data-color="accent"]:hover,
[data-type="icon-button"][data-variant="solid"][data-color="accent"]:hover,
[data-type="tabs-trigger"][data-state="active"] {
    box-shadow: 0px 0px 15px hsla(325, 100%, 80%, 0.5);
}

[data-type="main-menu"] {

}