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

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

    --ui-mainmenu-item-font-color-hover: var(--ui-color-accent-hover);
}

:root[data-theme="dark"] {
    --ui-color-secondary-normal: var(--ui-color-light-normal);
    --ui-color-secondary-hover: var(--ui-color-light-hover);
    --ui-color-secondary-active: var(--ui-color-light-active);
    --ui-color-secondary-disabled: var(--ui-color-light-disabled);

    --ui-color-muted-normal: hsl(265, 45%, 28%);
    --ui-color-muted-hover: hsl(265, 45%, 30%);
    --ui-color-muted-active: hsl(265, 45%, 28%);
    --ui-color-muted-disabled: hsla(265, 45%, 28%, 0.2);

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

    --ui-color-canvas: hsl(265, 55%, 20%);
    --ui-color-surface: hsl(265, 55%, 22%);

    --ui-color-elevated-normal: hsl(265, 45%, 24%);
    --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-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);

    --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-accent-hover);
    --ui-input-border-disabled: var(--ui-color-secondary-disabled);
}

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

    --ui-color-muted-normal: hsl(45, 10%, 88%);
    --ui-color-muted-hover: hsl(45, 10%, 85%);
    --ui-color-muted-active: hsl(45, 10%, 88%);
    --ui-color-muted-disabled: hsla(50, 10%, 88%, 0.2);

    --ui-color-accent-normal: hsl(275, 80%, 45%);
    --ui-color-accent-hover: hsl(295, 80%, 45%);
    --ui-color-accent-active: hsl(275, 70%, 45%);
    --ui-color-accent-disabled: hsla(275, 80%, 45%, 0.2);

    --ui-color-canvas: hsl(45, 20%, 95%);
    --ui-color-surface: hsl(45, 10%, 93%);

    --ui-color-elevated-normal: hsl(45, 15%, 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-secondary-normal);
    --ui-input-border-hover: var(--ui-color-secondary-hover);
    --ui-input-border-active: var(--ui-color-accent-hover);
    --ui-input-border-disabled: var(--ui-color-secondary-disabled);
}

:root {
    --ui-radius-md: 12px / 14px;
    --ui-radius-lg: 12px / 14px;
    --ui-radius-xl: 22px / 24px;

    --ui-button-radius: var(--ui-radius-lg);
    --ui-tabs-radius: var(--ui-radius-lg);
    --ui-input-radius: var(--ui-radius-lg);
    --ui-dropdown-radius: var(--ui-radius-lg);
    --ui-dropdown-item-radius: 10px / 12px;
    --ui-showcase-radius: var(--ui-radius-lg);
    --ui-callout-radius: var(--ui-radius-lg);

    --ui-mainmenu-item-font-size: var(--ui-button-font-size);
    --ui-mainmenu-height: 64px;

    --ui-header-logo-max-height: 46px;
}


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

[data-type="main-menu"]>[data-type="container-content"] {
    border-radius: var(--ui-radius-lg);
    background-color: var(--ui-color-surface);
    padding: 0 var(--ui-space-md);
    box-sizing: border-box;
}

[data-type="button"][data-variant="solid"][data-color="accent"] {
    background-image: linear-gradient(135deg, transparent, var(--ui-color-accent-hover));
}


[data-type="main-menu"]>[data-type="container-content"],
[data-type="button"][data-variant="solid"],
[data-type="icon-button"][data-variant="solid"],
[data-type="slider-dot"],
[data-type="game-card"],
[data-type="showcase"],
[data-type="callout"],
[data-type="banner"],
[data-type="bonus"]
{
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.05);
}
[data-type="banner"] {
    margin-bottom: 2px;
}
[data-type="separator"] {
    border-top-style: dotted;
}