:root {
    /* Classic Navy Blue - 90s primary color (brighter top shades for nav) */
    --primary-100: 65, 105, 225;
    --primary-200: 60, 95, 210;
    --primary-300: 55, 85, 195;
    --primary-400: 50, 75, 180;
    --primary-500: 0, 0, 128;
    --primary-600: 0, 0, 102;
    --primary-700: 0, 0, 76;
    --primary-800: 0, 0, 51;
    --primary-900: 0, 0, 25;

    /* Bright Lime Green - 90s success */
    --success-100: 204, 255, 204;
    --success-200: 153, 255, 153;
    --success-300: 102, 255, 102;
    --success-400: 51, 255, 51;
    --success-500: 0, 255, 0;
    --success-600: 0, 204, 0;
    --success-700: 0, 153, 0;
    --success-800: 0, 102, 0;
    --success-900: 0, 51, 0;

    /* Hot Magenta - 90s danger */
    --danger-100: 255, 204, 255;
    --danger-200: 255, 153, 255;
    --danger-300: 255, 102, 255;
    --danger-400: 255, 51, 255;
    --danger-500: 255, 0, 255;
    --danger-600: 204, 0, 204;
    --danger-700: 153, 0, 153;
    --danger-800: 102, 0, 102;
    --danger-900: 51, 0, 51;

    /* Electric Cyan - 90s info */
    --info-100: 204, 255, 255;
    --info-200: 153, 255, 255;
    --info-300: 102, 255, 255;
    --info-400: 51, 255, 255;
    --info-500: 0, 255, 255;
    --info-600: 0, 204, 255;
    --info-700: 0, 153, 204;
    --info-800: 0, 102, 153;
    --info-900: 0, 51, 102;

    /* Bright Yellow - 90s warning */
    --warning-100: 255, 255, 204;
    --warning-200: 255, 255, 153;
    --warning-300: 255, 255, 102;
    --warning-400: 255, 255, 51;
    --warning-500: 255, 255, 0;
    --warning-600: 255, 204, 0;
    --warning-700: 255, 153, 0;
    --warning-800: 204, 102, 0;
    --warning-900: 153, 76, 0;
}

/* ============================================
   90s RETRO HELPER CLASSES
   ============================================ */

/* Blinking text effect */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink-text,
blink {
    animation: blink 1s infinite;
}

/* Rainbow text effect */
.rainbow-text {
    background: linear-gradient(90deg, 
        #FF0000 0%, 
        #FF7F00 14%, 
        #FFFF00 28%, 
        #00FF00 42%, 
        #0000FF 57%, 
        #4B0082 71%, 
        #9400D3 85%, 
        #FF0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-scroll 3s linear infinite;
    background-size: 200% 100%;
}

@keyframes rainbow-scroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Neon glow effects */
.neon-green {
    color: #00FF00;
    text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 15px #00FF00;
}

.neon-pink {
    color: #FF00FF;
    text-shadow: 0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF;
}

.neon-cyan {
    color: #00FFFF;
    text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF;
}

.neon-yellow {
    color: #FFFF00;
    text-shadow: 0 0 5px #FFFF00, 0 0 10px #FFFF00, 0 0 15px #FFFF00;
}

/* Special 90s effects */
.blink-text {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.rainbow-text {
    background: linear-gradient(90deg, 
        #FF0000 0%, 
        #FF7F00 14%, 
        #FFFF00 28%, 
        #00FF00 42%, 
        #0000FF 57%, 
        #4B0082 71%, 
        #9400D3 85%, 
        #FF0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-scroll 3s linear infinite;
    background-size: 200% 100%;
}

@keyframes rainbow-scroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Classic 90s button styles */
.button-90s {
    background-color: #C0C0C0;
    border: 2px outset #FFFFFF;
    padding: 4px 12px;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.button-90s:active {
    border-style: inset;
    background-color: #A0A0A0;
}

/* Tiled background patterns */
.bg-starfield {
    background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="100" height="100" fill="%23000080"/%3E%3Ccircle cx="10" cy="10" r="1" fill="%23FFFFFF"/%3E%3Ccircle cx="40" cy="30" r="1" fill="%23FFFFFF"/%3E%3Ccircle cx="70" cy="20" r="1" fill="%23FFFFFF"/%3E%3Ccircle cx="30" cy="60" r="1" fill="%23FFFFFF"/%3E%3Ccircle cx="80" cy="70" r="1" fill="%23FFFFFF"/%3E%3Ccircle cx="50" cy="90" r="1" fill="%23FFFFFF"/%3E%3C/svg%3E');
}