[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%);
    --secondary-100: hsl(182, 100%, 90%);
    --secondary-300: hsl(182, 100%, 70%);
    --secondary-500: hsl(182, 100%, 40%);
    --secondary-700: hsl(182, 100%, 20%);
    --secondary-900: hsl(182, 100%, 10%);
    --accent-100: hsl(20, 99%, 90%);
    --accent-300: hsl(20, 99%, 75%);
    --accent-500: hsl(20, 99%, 60%);
    --accent-700: hsl(20, 99%, 40%);
    --accent-900: hsl(20, 99%, 20%);
    --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(--secondary-700);
    --color-component-secondary-text: var(--secondary-100);
    --color-container-secondary-background: var(--secondary-100);
    --color-container-secondary-text: var(--secondary-900);

    --color-component-neutral-background: var(--neutral-700);
    --color-component-neutral-text: var(--neutral-200);
    --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-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);

    .panel {
        position: relative;
        border: 0px;
        border-radius: 0px;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        margin: var(--spacing-md);
        background-color: rgba(0, 0, 0, 0);
    }

    .panel__inner::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        clip-path: polygon(
            0 4px,
            4px 0,

            70% 0,
            calc(70% + 8px) 8px,
            calc(100% - 4px) 8px,
            100% 12px,

            100% calc(100% - 8px),
            calc(100% - 8px) 100%,

            8px 100%,
            2px calc(100% - 6px),
            2px 75%,
            0 calc(75% - 2px)
        );
        background-color: var(--secondary-500);
        transition: background-color 300ms ease-in-out;
    }
    .panel__inner:hover::before {
        background-color: var(--accent-300);
    }
    .panel__inner::after {
        content: "";
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        background: var(--color-surface-raised1-background);
        box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
        clip-path: polygon(
            2px 6px,
            8px 0px,
            30px 0px,
            36px 6px,

            calc(70% + 6px) 6px,
            calc(70% + 10px) 10px,
            calc(100% - 6px) 10px,
            calc(100% - 2px) 14px,

            calc(100% - 2px) calc(100% - 6px),
            calc(100% - 6px) calc(100% - 2px),

            10px calc(100% - 2px),
            4px calc(100% - 8px),
            4px calc(75% + 2px),
            2px 75%
        );
    }

    .panel__content {
        position: relative;
        z-index: 1;
    }
    
    .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);
    }
}