/* base.css - Global styles and base theme */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Press+Start+2P&family=VT323&display=swap');

/* Root variables for theme consistency */
:root {
    --primary-bg: #0d0d2b;
    --secondary-bg: #1a1a3a;
    --tertiary-bg: #2d2d5a;
    --overlay-bg: rgba(13, 13, 43, 0.75);
    --primary-text: #00e0f0;
    --accent-gold: #FFD700;
    --accent-purple: #8A2BE2;
    --accent-pink: #c000c0;
    --accent-orange: #FF8C00;
    --scanline-color: rgba(200, 0, 200, 0.03);
    --card-bg: linear-gradient(135deg, rgba(31, 31, 61, 0.85), rgba(47, 47, 77, 0.85));
    --nav-bg: linear-gradient(to right, rgb(107, 33, 168), rgb(79, 70, 229));
}

/* Global body styles with cyberpunk theme */
body {
    font-family: 'Inter', sans-serif;
    /* Multiple fallback backgrounds in case primary fails */
    background-image: 
        url('https://i.imgur.com/mvgkHrU.jpeg'),
        url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1920&h=1080&fit=crop'),
        linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 50%, var(--tertiary-bg) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Firefox fallback */
    background-attachment: scroll;
    background-repeat: no-repeat;
    color: var(--primary-text);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Background overlay */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-bg);
    z-index: -2;
}

/* Scanlines effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 50%,
        var(--scanline-color) 50%
    );
    background-size: 100% 3px;
    z-index: -1;
    pointer-events: none;
    animation: scanlines 0.20s linear infinite;
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}

/* Typography hierarchy */
h1 {
    font-family: 'Press Start 2P', cursive;
    color: var(--accent-gold);
    text-shadow: 1px 1px 0px var(--accent-purple);
}

h2, h3, h4, h5, h6 {
    font-family: 'VT323', monospace;
    color: var(--accent-gold);
    text-shadow: 1px 1px 0px var(--accent-purple);
}

/* Font utility classes */
.font-retro {
    font-family: 'Press Start 2P', cursive;
}

.font-retro-content {
    font-family: 'VT323', monospace;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Global reset and accessibility */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent-gold);
    color: var(--primary-bg);
    padding: 8px;
    z-index: 1000;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 6px;
}