#nav button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--space-sm);
    pointer-events: none;
}

#nav button:hover {
    background: linear-gradient(135deg, var(--color-primary-lighter) 0%, var(--color-bg-hover) 100%);
    color: var(--color-primary);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-color: var(--color-primary);
}

#nav button:hover::before {
    opacity: 1;
}

#nav button.nav-btn-error {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 20%, var(--color-bg-primary)) 0%, color-mix(in srgb, var(--color-error) 10%, var(--color-bg-primary)) 100%);
    border-color: var(--color-error);
    color: var(--color-error);
    font-weight: 600;
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-error) 15%, transparent);
}

#nav button.nav-btn-error:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-error) 25%, var(--color-bg-primary)) 0%, color-mix(in srgb, var(--color-error) 15%, var(--color-bg-primary)) 100%);
    color: color-mix(in srgb, var(--color-error) 80%, transparent);
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-error) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-error) 80%, transparent);
}