@layer theme {
    :root {
        --primary-color: #ff6b9d;
        --secondary-color: #ffd93d;
        --accent-color: #6bcfff;
        --dark-bg: #1a0033;
        --light-text: #ffffff;
    }
}

@layer base {
    body {
        @apply bg-[var(--dark-bg)] text-[var(--light-text)] font-sans;
    }
    
    h1, h2, h3 {
        @apply font-bold;
    }
}

@layer components {
    .retro-border {
        border: 3px solid var(--primary-color);
        box-shadow: 5px 5px 0 var(--secondary-color), 10px 10px 0 var(--accent-color);
    }
    
    .neon-text {
        text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
    }
    
    .retro-button {
        @apply px-8 py-4 font-bold text-lg uppercase tracking-wider transition-all duration-300;
        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        border: 3px solid var(--light-text);
        box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
    }
    
    .retro-button:hover {
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    }
}