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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ===== CSS Custom Properties ===== */
:root {
    /* Colors from portfolio */
    --bg-primary: #0d1117;
    --bg-primary-light: rgba(22, 27, 34, 0.89);
    --bg-card: rgba(22, 27, 34, 0.7);
    --primary-color: #42a5f5;
    --blue-glow: rgba(37, 99, 235, 0.3);
    --pink-glow: rgba(244, 63, 94, 0.3);
    --gradient-blue: #2563EB4C;
    --gradient-pink: #F43F5E4C;
    --text-white: #E5E7EB;
    --text-gray: #9CA3AF;
    --text-cyan: #22D3EE;
    --terminal-green: #4ADE80;
    --traffic-red: #FF5F56;
    --traffic-yellow: #FFBD2E;
    --traffic-green: #27C93F;

    /* Fonts */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* ===== Base ===== */
body {
    font-family: var(--font-sans);
    color: var(--text-white);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ===== Screen Reader Only ===== */
.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;
}

/* ===== Gradient Border Animation ===== */
@keyframes animatedgradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Blinking Cursor ===== */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ===== Fade In Up ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Fade In ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}