/* CSS Custom Properties */
:root {
    /* Colors */
    --color-primary-light: #3B82F6;
    --color-primary-dark: #60A5FA;
    --color-bg-light: #ffffff;
    --color-bg-dark: #1f2937;
    --color-text-light: #111827;
    --color-text-dark: #f3f4f6;
    
    /* Timing */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    
    /* Z-index layers */
    --z-base: 1;
    --z-above: 2;
    --z-top: 3;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-lg);
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transitions */
.transition-base {
    transition: 
        background-color var(--transition-normal) ease,
        color var(--transition-normal) ease,
        border-color var(--transition-normal) ease,
        transform var(--transition-normal) ease,
        opacity var(--transition-normal) ease;
}

/* Interactive Elements */
a, 
button {
    transition: all var(--transition-normal) ease;
}

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

/* Responsive Layout */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .tech-stack {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }
}

/* Print Styles */
@media print {
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}