[data-theme="neon"] {
    --neutral-100: hsl(225, 48%, 90%);
    --neutral-200: hsl(225, 48%, 85%);
    --neutral-300: hsl(225, 48%, 80%);
    --neutral-400: hsl(225, 48%, 70%);
    --neutral-500: hsl(225, 48%, 60%);
    --neutral-600: hsl(225, 48%, 40%);
    --neutral-700: hsl(225, 48%, 30%);
    --neutral-800: hsl(225, 48%, 20%);
    --neutral-900: hsl(225, 48%, 10%);
    --primary-100: hsl(260, 100%, 95%);
    --primary-300: hsl(260, 100%, 80%);
    --primary-500: hsl(260, 100%, 60%);
    --primary-700: hsl(260, 100%, 40%);
    --primary-900: hsl(260, 100%, 20%);
    --accent-100: hsl(182, 100%, 90%);
    --accent-300: hsl(182, 100%, 70%);
    --accent-500: hsl(182, 100%, 40%);
    --accent-700: hsl(182, 100%, 20%);
    --accent-900: hsl(182, 100%, 10%);
    --warning-100: hsl(0, 100%, 95%);
    --warning-300: hsl(0, 100%, 80%);
    --warning-500: hsl(0, 100%, 60%);
    --warning-700: hsl(0, 100%, 40%);
    --warning-900: hsl(0, 100%, 20%);

    --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-500);
    --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(--neutral-700);
    --color-component-secondary-text: var(--neutral-200);
    --color-container-secondary-background: var(--neutral-200);
    --color-container-secondary-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-900);
    --color-surface-text: var(--neutral-100);

    --color-surface-raised1-background: var(--neutral-800);
    --color-surface-raised1-text: var(--neutral-100);
    --color-surface-raised2-background: var(--neutral-700);
    --color-surface-raised2-text: var(--neutral-100);
    --color-surface-raised3-background: var(--neutral-600);
    --color-surface-raised3-text: var(--neutral-100);
    --color-surface-raised4-background: var(--neutral-500);
    --color-surface-raised4-text: var(--neutral-900);
    --color-surface-raised5-background: var(--neutral-400);
    --color-surface-raised5-text: var(--neutral-900);

    --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-500);
    --border-hover: 2px solid var(--accent-300);
    
    .list__item {
        border-radius: var(--radius-sm);
    }
    
    .tabs_horizontal {
        background-color: var(--color-surface-raised1-background);
        gap: var(--space-sm);
    }
    
    .tabs__item {
        background-color: var(--color-component-secondary-background);
        color: var(--color-component-secondary-text);
    }
    
    .tabs__item_selected {
        background-color: var(--color-component-primary-background);
        color: var(--color-component-primary-text);
    }

    .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-900);
        color: var(--warning-100);
    }

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

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

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

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

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

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