/* Shared styles and theme variables */
:root {
    --cyber-dark: 248 250 252;
    --cyber-light: 241 245 249;
    --cyber-accent: 24 119 242;
    --cyber-muted: 71 85 105;
    --cyber-card: 255 255 255;
    --body-bg: #f8fafc;
    --body-text: #0f172a;
    --grid-color: rgba(30, 41, 59, 0.05);
    --border-color: rgba(0, 0, 0, 0.05);
    --code-bg: #1e293b;
    --code-text: #f8fafc;
}

.dark {
    --cyber-dark: 15 23 42;
    --cyber-light: 30 41 59;
    --cyber-accent: 24 119 242;
    --cyber-muted: 148 163 184;
    --cyber-card: 30 41 59;
    --body-bg: #0f172a;
    --body-text: #e2e8f0;
    --grid-color: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.05);
    --code-bg: #0f172a;
    --code-text: #e2e8f0;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--body-bg); 
    color: var(--body-text); 
    transition: background-color 0.3s ease, color 0.3s ease; 
}

.font-mono { font-family: 'JetBrains Mono', monospace; }

.gradient-text {
    background: linear-gradient(to right, #1877f2, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tech-grid {
    background-image: radial-gradient(var(--grid-color) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--body-bg); }
::-webkit-scrollbar-thumb { background: var(--cyber-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyber-accent); }