/* ═══════════════════════════════════════════════════════════════
   GAME BOY DESIGN SYSTEM - Variables & Tokens
   "What if Game Boy had 2026 web capabilities?"
   Dark Mode with Purple Accents
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── PURPLE DARK MODE PALETTE ─── */
    --gb-darkest: #0a0a0f;
    /* Near black - main background */
    --gb-dark: #1a1a2e;
    /* Dark purple-gray - secondary bg */
    --gb-light: #9d4edd;
    /* Vibrant purple - primary accent */
    --gb-lightest: #c77dff;
    /* Light purple - highlights, hover */

    /* Extended palette for modern touches */
    --gb-screen: #12121a;
    /* Dark screen background */
    --gb-shell: #2d2d44;
    /* Shell purple-gray */
    --gb-shell-dark: #1f1f32;
    /* Shell shadow */
    --gb-black: #08080c;
    /* Pure black for contrast */
    --gb-white: #f0f0f5;
    /* Off-white with slight purple tint */
    --gb-amber: #f7b731;
    /* Achievement/highlight color */
    --gb-red: #ff6b6b;
    /* Error/warning states */

    /* Additional purple shades */
    --gb-purple-dim: #7b2cbf;
    /* Dimmer purple for borders */
    --gb-purple-glow: #e0aaff;
    /* Glow/neon effect */
    --gb-text: #ffffff;
    /* Primary text - white */
    --gb-text-muted: #a0a0b0;
    /* Muted text */

    /* ─── TYPOGRAPHY ─── */
    --font-pixel: 'Press Start 2P', monospace;
    --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font sizes - using pixel-perfect increments */
    --text-xs: 0.625rem;
    /* 10px */
    --text-sm: 0.75rem;
    /* 12px */
    --text-base: 0.875rem;
    /* 14px */
    --text-md: 1rem;
    /* 16px */
    --text-lg: 1.25rem;
    /* 20px */
    --text-xl: 1.5rem;
    /* 24px */
    --text-2xl: 2rem;
    /* 32px */
    --text-3xl: 2.5rem;
    /* 40px */
    --text-4xl: 3rem;
    /* 48px */

    /* ─── SPACING (8px grid system) ─── */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.5rem;
    /* 24px */
    --space-6: 2rem;
    /* 32px */
    --space-7: 2.5rem;
    /* 40px */
    --space-8: 3rem;
    /* 48px */
    --space-9: 4rem;
    /* 64px */
    --space-10: 5rem;
    /* 80px */
    --space-11: 6rem;
    /* 96px */
    --space-12: 8rem;
    /* 128px */

    /* ─── BORDERS & SHADOWS ─── */
    --border-thin: 2px solid var(--gb-purple-dim);
    --border-thick: 4px solid var(--gb-purple-dim);
    --border-pixel: 3px solid var(--gb-purple-dim);

    /* Pixel-perfect shadows */
    --shadow-sm: 2px 2px 0 var(--gb-purple-dim);
    --shadow-md: 4px 4px 0 var(--gb-purple-dim);
    --shadow-lg: 6px 6px 0 var(--gb-purple-dim);
    --shadow-glow: 0 0 20px var(--gb-light);
    --shadow-screen: inset 0 0 40px rgba(157, 78, 221, 0.15);

    /* ─── TRANSITIONS ─── */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms ease-out;
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ─── LAYOUT ─── */
    --max-width: 1200px;
    --content-width: 800px;
    --nav-height: 70px;
    --border-radius: 8px;
    --border-radius-lg: 16px;

    /* ─── Z-INDEX SCALE ─── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-loader: 1000;
}

/* ─── DARK MODE IS DEFAULT ─── */
@media (prefers-color-scheme: light) {
    :root {
        /* Keep dark mode even in light preference */
        --gb-screen: #12121a;
    }
}