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

    --ui-color-dark-normal: hsl(0, 0%, 10%);
    --ui-color-dark-hover: hsl(0, 0%, 15%);
    --ui-color-dark-active: hsl(0, 0%, 10%);
    --ui-color-dark-disabled: hsl(0, 0%, 10%, 0.2);

    --ui-tabs-font-color-normal: var(--ui-color-primary-normal);
    --ui-tabs-font-color-hover: var(--ui-color-primary-hover);
    --ui-tabs-font-color-active: var(--ui-color-primary-active);
    --ui-tabs-font-color-disabled: var(--ui-color-primary-disabled);
}

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

    --ui-color-muted-normal: hsl(0, 0%, 20%);
    --ui-color-muted-hover: hsl(0, 0%, 15%);
    --ui-color-muted-active: hsl(0, 0%, 10%);
    --ui-color-muted-disabled: hsla(0, 0%, 20%, 0.2);

    --ui-color-accent-normal: hsl(10, 90%, 45%);
    --ui-color-accent-hover: hsl(10, 90%, 30%);
    --ui-color-accent-active: hsl(10, 90%, 35%);
    --ui-color-accent-disabled: hsla(10, 90%, 45%, 0.2);

    --ui-color-canvas: hsl(0, 0%, 8%);
    --ui-color-surface: hsl(0, 0%, 6%);

    --ui-color-elevated-normal: hsl(0, 0%, 10%);
    --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));

    --ui-input-background-normal: var(--ui-color-elevated-normal);
    --ui-input-background-hover: var(--ui-color-elevated-normal);
    --ui-input-background-active: var(--ui-color-elevated-normal);
    --ui-input-background-disabled: transparent;

    --ui-input-border-normal: var(--ui-color-muted-normal);
    --ui-input-border-hover: var(--ui-color-secondary-hover);
    --ui-input-border-active: var(--ui-color-secondary-active);
    --ui-input-border-disabled: var(--ui-color-muted-disabled);
}

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

    --ui-color-muted-normal: hsl(0, 0%, 82%);
    --ui-color-muted-hover: hsl(0, 0%, 72%);
    --ui-color-muted-active: hsl(0, 0%, 70%);
    --ui-color-muted-disabled: hsla(0, 0%, 82%, 0.2);

    --ui-color-accent-normal: hsl(5, 90%, 55%);
    --ui-color-accent-hover: hsl(5, 90%, 40%);
    --ui-color-accent-active: hsl(5, 90%, 45%);
    --ui-color-accent-disabled: hsla(5, 90%, 55%, 0.2);

    --ui-color-canvas: hsl(0, 0%, 85%);
    --ui-color-surface: hsl(0, 0%, 87%);

    --ui-color-elevated-normal: hsl(0, 0%, 90%);
    --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));

    --ui-input-background-normal: var(--ui-color-elevated-normal);
    --ui-input-background-hover: var(--ui-color-elevated-normal);
    --ui-input-background-active: var(--ui-color-elevated-normal);
    --ui-input-background-disabled: transparent;

    --ui-input-border-normal: var(--ui-color-muted-normal);
    --ui-input-border-hover: var(--ui-color-secondary-hover);
    --ui-input-border-active: var(--ui-color-secondary-active);
    --ui-input-border-disabled: var(--ui-color-muted-disabled);
}

:root[data-theme="dark"] [data-type="header"] {
    box-shadow: 0 0 5px rgba(0,0,0,0.9)
}

:root[data-theme="light"] [data-type="header"] {
    box-shadow: 0 0 5px rgba(0,0,0,0.2)
}

[data-type="main-menu"] {
    margin-top: var(--ui-space-md);
}

[data-type="button"][data-variant="solid"][data-color="secondary"],
[data-type="icon-button"][data-variant="solid"][data-color="secondary"] {
    background-image: linear-gradient(0deg, var(--ui-button-background-secondary-hover), transparent);
}
[data-type="button"][data-variant="solid"][data-color="accent"],
[data-type="icon-button"][data-variant="solid"][data-color="accent"]{
    background-image: linear-gradient(0deg, var(--ui-button-background-accent-hover), transparent);
}
[data-type="tabs-trigger"][data-state="active"] {
    background-image: linear-gradient(0deg, transparent, var(--ui-tabs-selected-background-hover));
}

[data-type="button"][data-variant="solid"],
[data-type="icon-button"][data-variant="solid"],
[data-type="tabs-trigger"][data-state="active"] {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.1);
}

:root {
    --ui-radius-md: 6px;
    --ui-radius-lg: 6px;
    --ui-radius-xl: 6px;
}