/* Use Inter font */
body {
    font-family: 'Inter', sans-serif;
    /* Light mode default */
    background-color: #ffffff; /* white */
    color: #09090b; /* zinc-950 */
    transition: background-color 0.3s, color 0.3s;
}

/* Light mode scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; /* zinc-100 */
}
::-webkit-scrollbar-thumb {
    background-color: #a1a1aa; /* zinc-400 */
    border-radius: 6px;
    border: 3px solid #f1f1f1; /* zinc-100 */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #71717a; /* zinc-500 */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #09090b; /* zinc-950 */
        color: #f4f4f5; /* zinc-100 */
    }
    
    ::-webkit-scrollbar-track {
        background: #18181b; /* zinc-900 */
    }
    ::-webkit-scrollbar-thumb {
        background-color: #3f3f46; /* zinc-700 */
        border-radius: 6px;
        border: 3px solid #18181b; /* zinc-900 */
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #52525b; /* zinc-600 */
    }
}

/* Two-tone theme variables (brighter light, true dark) */
:root {
	--bg-a: #ffffff;              /* light background */
	--bg-b: #f8fafc;              /* subtle panel tint */
	--orb1: rgba(99,102,241,.08); /* indigo haze */
	--orb2: rgba(244,114,182,.08);/* pink haze */
}

html.dark {
	--bg-a: #0b1020;              /* deep navy */
	--bg-b: #0f172a;              /* slate/ink panels */
	--orb1: rgba(96,165,250,.28); /* light blue glow */
	--orb2: rgba(99,102,241,.18); /* indigo glow */
}

/* Use solid theme background; no darkening gradients */
body {
	background-color: var(--bg-a);
	position: relative;
	overflow-x: hidden;
}

/* Light theme pastel orb (bottom-left) */
body::after {
	content: "";
	position: fixed;
	bottom: -180px;
	left: -180px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--orb2) 0%, transparent 65%);
	filter: blur(18px);
	pointer-events: none;
	z-index: 0;
}

/* Dark theme light-blue orb (top-right) */
html.dark body::before {
	content: "";
	position: fixed;
	top: -220px;
	right: -220px;
	width: 680px;
	height: 680px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(96,165,250,.35) 0%, rgba(99,102,241,.18) 55%, transparent 70%);
	filter: blur(22px);
	pointer-events: none;
	z-index: 0;
}

/* Keep content above decorative orbs */
header, main, footer {
	position: relative;
	z-index: 1;
}

/* Active nav link style */
.nav-link.active {
    color: #6366f1; /* indigo-500 */
    font-weight: 600;
}

/* Hide sections by default, except home */
.page-section {
    display: none;
}
#home-section {
    display: block;
}

/* Page transition (simple fade) */
.page-section {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}