/* css */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500&display=swap');

/* CSS Variables for Themes */
:root {
    /* Light Theme - More balanced with dark accents */
    --bg-primary-light: #f8fafc;
    --bg-secondary-light: #f1f5f9;
    --bg-accent-light: #e2e8f0;
    --text-primary-light: #1e293b;
    --text-secondary-light: #475569;
    --text-accent-light: #2563eb;
    --border-light: #cbd5e1;
    --shadow-light: rgba(15, 23, 42, 0.1);
    --card-bg-light: #ffffff;
    --footer-bg-light: #0f172a;

    /* Dark Theme */
    --bg-primary-dark: #0f172a;
    --bg-secondary-dark: #1e293b;
    --bg-accent-dark: #334155;
    --text-primary-dark: #e2e8f0;
    --text-secondary-dark: #94a3b8;
    --text-accent-dark: #60a5fa;
    --border-dark: #1e293b;
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --card-bg-dark: #1e293b;
    --footer-bg-dark: #020617;

    /* Default to dark theme */
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-accent: var(--bg-accent-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-accent: var(--text-accent-dark);
    --border: var(--border-dark);
    --shadow: var(--shadow-dark);
    --card-bg: var(--card-bg-dark);
    --footer-bg: var(--footer-bg-dark);
}

[data-theme="light"] {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-accent: var(--bg-accent-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-accent: var(--text-accent-light);
    --border: var(--border-light);
    --shadow: var(--shadow-light);
    --card-bg: var(--card-bg-light);
    --footer-bg: var(--footer-bg-light);
}

/* reset + box-sizing including pseudo-elements */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* full-height baseline */
html, body {
    height: 100%;
    scroll-behavior: smooth;
}

/* apply Source Sans 3 font with fallbacks - Dynamic Theme */
body {
    font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Main Content */
main {
    flex: 1;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Additional animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Enhanced focus states for accessibility */
.nav-links li a:focus,
.footer-icon:focus,
.skill-tag:focus {
    outline: 2px solid #63b3ed;
    outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

/* Animations */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}