/* ===== BASE STYLES - PERFORMANCE FIRST ===== */

/* Performance-First Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Optimized HTML & Body */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.6;
    color: var(--text-light);
    background: var(--dark-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    position: relative;
}

/* Gaming-themed background with performance optimization */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    
    /* Gaming circuit board pattern */
    background-image: 
        /* Main circuit lines */
        linear-gradient(90deg, rgba(205, 127, 50, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(205, 127, 50, 0.03) 1px, transparent 1px),
        
        /* Gaming grid overlay */
        linear-gradient(90deg, rgba(218, 165, 32, 0.02) 1px, transparent 1px),
        linear-gradient(0deg, rgba(218, 165, 32, 0.02) 1px, transparent 1px),
        
        /* Circuit nodes pattern */
        radial-gradient(circle at 25px 25px, rgba(205, 127, 50, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 75px 75px, rgba(184, 134, 11, 0.05) 1px, transparent 1px);
    
    background-size: 
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px,
        100px 100px,
        50px 50px;
    
    background-position:
        0 0,
        0 0,
        10px 10px,
        10px 10px,
        0 0,
        25px 25px;
        
    pointer-events: none;
    will-change: transform;
}

/* Gaming atmosphere effects */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    
    /* Gaming ambient lighting */
    background: 
        /* Corner gaming lights */
        radial-gradient(ellipse at top left, rgba(205, 127, 50, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(218, 165, 32, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(184, 134, 11, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(205, 127, 50, 0.04) 0%, transparent 50%),
        
        /* Central gaming glow */
        radial-gradient(ellipse at center, rgba(205, 127, 50, 0.03) 0%, transparent 70%),
        
        /* Gaming scan lines effect (very subtle) */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(205, 127, 50, 0.01) 2px,
            rgba(205, 127, 50, 0.01) 4px
        );
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--text-light);
}

h1 {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h3 {
    font-size: var(--text-xl);
    color: var(--primary-color);
}

h4 {
    font-size: var(--text-lg);
}

h5, h6 {
    font-size: var(--text-base);
}

/* Paragraphs and Text */
p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-gray);
    max-width: 65ch;
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-normal);
}

a:hover {
    color: var(--accent-color);
}

a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Lists */
ul, ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
}

li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-gray);
}

/* Code Blocks */
code {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    background: var(--card-bg);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--accent-color);
}

pre {
    background: var(--card-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

pre code {
    background: none;
    padding: 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

th, td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-weight: var(--font-semibold);
    color: var(--text-light);
    background: var(--card-bg);
}

/* Form Elements Base */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles for Keyboard Navigation */
body.keyboard-navigation *:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Selection Styles */
::selection {
    background: var(--primary-color);
    color: var(--text-dark);
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--text-dark);
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--darker-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Firefox Scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--darker-bg);
}

/* Performance Optimization Classes */
.gpu-accelerated {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-light { color: var(--text-light); }
.text-gray { color: var(--text-gray); }
.text-muted { color: var(--text-muted); }

/* Print Styles */
@media print {
    body::before {
        display: none;
    }
    
    * {
        color: black !important;
        background: white !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    @page {
        margin: 2cm;
    }
}