[data-theme="default"] {
    --primary-100: hsl(220, 100%, 90%);
    --primary-300: hsl(220, 100%, 80%);
    --primary-500: hsl(240, 100%, 65%);
    --primary-700: hsl(240, 100%, 35%);
    --primary-900: hsl(240, 100%, 15%);
    --secondary-100: hsl(220, 100%, 90%);
    --secondary-300: hsl(220, 100%, 80%);
    --secondary-500: hsl(240, 100%, 65%);
    --secondary-700: hsl(240, 100%, 35%);
    --secondary-900: hsl(240, 100%, 15%);
    --neutral-100: hsl(0, 0%, 99%);
    --neutral-200: hsl(0, 0%, 90%);
    --neutral-300: hsl(0, 0%, 80%);
    --neutral-400: hsl(0, 0%, 70%);
    --neutral-500: hsl(0, 0%, 65%);
    --neutral-600: hsl(0, 0%, 50%);
    --neutral-700: hsl(0, 0%, 40%);
    --neutral-800: hsl(0, 0%, 20%);
    --neutral-900: hsl(0, 0%, 10%);
    --accent-100: hsl(270, 50%, 90%);
    --accent-300: hsl(270, 80%, 80%);
    --accent-500: hsl(270, 100%, 65%);
    --accent-700: hsl(270, 100%, 40%);
    --accent-900: hsl(270, 100%, 15%);
    --warning-100: hsl(0, 100%, 90%);
    --warning-300: hsl(0, 100%, 80%);
    --warning-500: hsl(0, 100%, 65%);
    --warning-700: hsl(0, 100%, 40%);
    --warning-900: hsl(0, 100%, 15%);
    
    --typography-family-default: Helvetica;
    --typography-weight-base: 500;
    --typography-size-sm: 14px;
    --typography-size-base: 16px;
    --typography-size-lg: 24p;
    
    --color-component-primary-background: var(--primary-700);
    --color-component-primary-text: var(--primary-100);
    --color-container-primary-background: var(--primary-100);
    --color-container-primary-text: var(--primary-900);
    
    --color-component-secondary-background: var(--secondary-300);
    --color-component-secondary-text: var(--secondary-900);
    --color-container-secondary-background: var(--secondary-200);
    --color-container-secondary-text: var(--secondary-900);
    
    --color-component-neutral-background: var(--neutral-300);
    --color-component-neutral-text: var(--neutral-900);
    --color-container-neutral-background: var(--neutral-200);
    --color-container-neutral-text: var(--neutral-900);
    
    --color-component-accent-background: var(--accent-700);
    --color-component-accent-text: var(--accent-100);
    --color-container-accent-background: var(--accent-100);
    --color-container-accent-text: var(--accent-900);
    
    --color-component-warning-background: var(--warning-700);
    --color-component-warning-text: var(--warning-100);
    --color-container-warning-background: var(--warning-100);
    --color-container-warning-text: var(--warning-900);
    
    --color-surface-background: var(--neutral-100);
    --color-surface-text: var(--neutral-900);
    
    --color-surface-raised1-background: var(--neutral-200);
    --color-surface-raised1-text: var(--neutral-800);
    --color-surface-raised2-background: var(--neutral-300);
    --color-surface-raised2-text: var(--neutral-800);
    --color-surface-raised3-background: var(--neutral-400);
    --color-surface-raised3-text: var(--neutral-900);
    --color-surface-raised4-background: var(--neutral-500);
    --color-surface-raised4-text: var(--neutral-900);
    --color-surface-raised5-background: var(--neutral-600);
    --color-surface-raised5-text: var(--neutral-100);
    
    --font-family: "Fira Sans", Helvetica, sans-serif;
    --typography-body: 16px var(--font-family);
    --typography-bold: 600 16px var(--font-family);
    --typography-heading: 24px var(--font-family);
    
    --border-default: 2px solid var(--neutral-600);
    --border-transparent: 2px solid transparent;
    --border-active: 2px solid var(--primary-700);
    --border-hover: 2px solid var(--accent-300);
    
    .list__item {
        border-radius: var(--radius-sm);
    }
    
    .tabs_horizontal {
        background-color: var(--color-surface-raised1-background);
        border-radius: var(--radius-full);
    }
    
    .tabs__item {
        background-color: var(--color-component-secondary-background);
        color: var(--color-component-secondary-text);
        border-radius: var(--radius-full);
    }
    
    .tabs__item_selected {
        background-color: var(--color-component-primary-background);
        color: var(--color-component-primary-text);
    }

    .button {
        border-radius: var(--radius-full);
    }

    .button_primary-destructive {
        background-color: var(--color-component-warning-background);
        color: var(--color-component-warning-text);
    }
    .button_primary {
        background-color: var(--color-component-primary-background);
        color: var(--color-component-primary-text);
    }

    .button_secondary-destructive {
        background-color: var(--warning-100);
        color: var(--warning-900);
    }

    .button_secondary {
        background-color: var(--color-component-secondary-background);
        color: var(--color-component-secondary-text);
    }

    .sidebar {
        > .button {
            background-color: var(--accent-300);
            color: var(--accent-900);
            border-radius: var(--radius-sm);
        }
    }

    .range {
        border-radius: var(--space-md);
    }

    .range__step_filled {
        background-color: var(--primary-700);
    }

    .range__step_unfilled {
        background-color: var(--neutral-100);
    }

    .range__step_unavailable {
        background-color: var(--neutral-900);
    }

    .range__step_hover {
        background-color: var(--accent-300);
    }
}