:root[data-theme="dark"] {
    --ui-color-secondary-normal: hsl(180, 100%, 45%);
    --ui-color-secondary-hover: hsl(180, 100%, 35%);
    --ui-color-secondary-active: hsl(180, 100%, 45%);
    --ui-color-secondary-disabled: hsla(180, 100%, 45%, 0.2);

    --ui-color-muted-normal: hsl(215, 50%, 20%);
    --ui-color-muted-hover: hsl(215, 50%, 30%);
    --ui-color-muted-active: hsl(215, 50%, 20%);
    --ui-color-muted-disabled: hsla(215, 50%, 20%, 0.2);

    --ui-color-accent-normal: hsl(340, 80%, 50%);
    --ui-color-accent-hover: hsl(340, 80%, 40%);
    --ui-color-accent-active: hsl(340, 80%, 50%);
    --ui-color-accent-disabled: hsla(340, 80%, 50%, 0.2);

    --ui-color-canvas: hsl(215, 50%, 12%);
    --ui-color-surface: hsl(215, 50%, 10%);

    --ui-color-elevated-normal: hsl(215, 50%, 15%);
    --ui-color-elevated-danger: color-mix(in hsl, var(--ui-color-danger-normal) 5%, var(--ui-color-elevated-normal));
    --ui-color-elevated-warning: color-mix(in hsl, var(--ui-color-warning-normal) 5%, var(--ui-color-elevated-normal));
    --ui-color-elevated-success: color-mix(in hsl, var(--ui-color-success-normal) 5%, var(--ui-color-elevated-normal));
}

:root[data-theme="light"] {
    --ui-color-accent-normal: hsl(340, 80%, 50%);
    --ui-color-accent-hover: hsl(340, 80%, 40%);
    --ui-color-accent-active: hsl(340, 80%, 50%);
    --ui-color-accent-disabled: hsla(340, 80%, 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;

    --ui-header-logo-max-height: calc(100% - 8px);
}