/* ============================================================
           THEME SYSTEM
           Dark is the default (:root). Every color that needs to differ
           between modes is a CSS variable; [data-theme="light"] below
           overrides just those variables. Nothing else needs to change —
           every component (buttons, cards, glass panels, text) already
           reads from these variables rather than hardcoded colors.
           ============================================================ */
        :root {
            --bg-base: #0b0d13;
            --bg-elevated: #12141c;

            /* Backgrounds/borders/decorative shapes — stay vibrant in both modes */
            --accent-1: #818cf8;   /* indigo-400 */
            --accent-2: #a78bfa;   /* violet-400 */
            --accent-3: #22d3ee;   /* cyan-400 */

            /* Colored TEXT (e.g. .text-gradient) needs its own darker
               variants in light mode for contrast against a white page —
               these are what actually get used for text color. */
            --accent-1-text: #818cf8;
            --accent-2-text: #a78bfa;

            --text-primary: #ffffff;    /* headings */
            --text-emphasis: #e2e8f0;   /* nav links, labels, badges — slate-200 */
            --text-secondary: #94a3b8;  /* body copy, descriptions — slate-400 */
            --text-tertiary: #64748b;   /* meta text, timestamps — slate-500 */

            --glass-bg: rgba(255, 255, 255, 0.045);
            --glass-border: rgba(255, 255, 255, 0.09);
            --glass-strong-bg: rgba(255, 255, 255, 0.065);
            --glass-strong-border: rgba(255, 255, 255, 0.12);

            --surface-tint: rgba(255, 255, 255, 0.03);
            --surface-tint-strong: rgba(255, 255, 255, 0.06);

            --nav-scroll-bg: rgba(11, 13, 19, 0.72);
            --selection-bg: rgba(129, 140, 248, 0.35);
            --selection-text: #ffffff;
            --blob-opacity: 0.35;
        }

        :root[data-theme="light"] {
            --bg-base: #fafafa;
            --bg-elevated: #f0f0f5;

            --accent-1-text: #6366f1;   /* indigo-500 — darker for contrast on white */
            --accent-2-text: #8b5cf6;   /* violet-500 */

            --text-primary: #0f172a;    /* slate-900 */
            --text-emphasis: #334155;   /* slate-700 */
            --text-secondary: #475569;  /* slate-600 — needs to stay readable, this is real body copy */
            --text-tertiary: #94a3b8;   /* slate-400 — ok to be faint, only used for meta/timestamps */

            --glass-bg: rgba(15, 15, 20, 0.04);
            --glass-border: rgba(15, 15, 20, 0.08);
            --glass-strong-bg: rgba(15, 15, 20, 0.055);
            --glass-strong-border: rgba(15, 15, 20, 0.12);

            --surface-tint: rgba(15, 15, 20, 0.025);
            --surface-tint-strong: rgba(15, 15, 20, 0.045);

            --nav-scroll-bg: rgba(250, 250, 250, 0.75);
            --selection-bg: rgba(99, 102, 241, 0.18);
            --selection-text: #0f172a;
            --blob-opacity: 0.22; /* color washes read stronger on white, so dial back */
        }

        html { transition: background-color 0.3s ease; }

        html, body { background: var(--bg-base); }
        body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
        h1, h2, h3, h4, .font-display { font-family: 'Manrope', 'Inter', sans-serif; }

        /* ---------- Gradient mesh background (ambient, not shapes) ---------- */
        .mesh-blob {
            position: absolute;
            border-radius: 9999px;
            filter: blur(90px);
            opacity: var(--blob-opacity);
            pointer-events: none;
            z-index: 0;
        }
        @media (prefers-reduced-motion: no-preference) {
            .mesh-blob.float-slow { animation: floatSlow 18s ease-in-out infinite; }
            .mesh-blob.float-slow-rev { animation: floatSlow 22s ease-in-out infinite reverse; }
        }
        @keyframes floatSlow {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(3%, -4%) scale(1.06); }
        }

        /* ---------- Glass panel utility ---------- */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
        }
        .glass-strong {
            background: var(--glass-strong-bg);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--glass-strong-border);
        }

        /* ---------- Nav: transparent at top, glass once scrolled ---------- */
        #siteNav {
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
        }
        #siteNav.nav-scrolled {
            background: var(--nav-scroll-bg);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom-color: var(--glass-border);
        }

        /* Active nav link underline */
        .nav-link { position: relative; }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -4px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s ease-out;
            border-radius: 2px;
        }
        .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
        .nav-link.is-active { color: var(--text-primary); }

        /* ---------- Buttons ---------- */
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
            transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, filter 0.25s ease-out;
            box-shadow: 0 8px 24px -8px rgba(129, 140, 248, 0.45);
        }
        .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 32px -8px rgba(129, 140, 248, 0.6); filter: brightness(1.05); }
        .btn-primary:active { transform: translateY(0) scale(0.99); }

        .btn-ghost {
            transition: transform 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out;
        }
        .btn-ghost:hover { transform: translateY(-2px); }

        /* ---------- Cards ---------- */
        .card-hover {
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            border-color: rgba(129, 140, 248, 0.4);
            box-shadow: 0 20px 40px -20px rgba(99, 102, 241, 0.35);
        }

        /* ---------- Scroll reveal ---------- */
        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .reveal.is-visible { opacity: 1; transform: translateY(0); }

        /* ---------- Links / inline hovers ---------- */
        .link-underline {
            background-image: linear-gradient(var(--accent-1), var(--accent-1));
            background-size: 0% 1px;
            background-position: left bottom;
            background-repeat: no-repeat;
            transition: background-size 0.25s ease-out, color 0.25s ease-out;
        }
        .link-underline:hover { background-size: 100% 1px; }

        .icon-nudge { transition: transform 0.25s ease-out; display: inline-block; }
        .icon-nudge:hover { transform: translateX(3px); }

        /* ---------- Timeline ---------- */
        .timeline-line {
            background: linear-gradient(180deg, var(--accent-1), var(--accent-2), transparent);
        }
        .timeline-node {
            box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15), 0 0 20px rgba(129, 140, 248, 0.5);
        }

        /* ---------- Page fade-in ---------- */
        #pageContent { animation: pageFadeIn 0.5s ease-out both; }
        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Gradient text helper */
        .text-gradient {
            background: linear-gradient(135deg, var(--accent-1-text), var(--accent-2-text) 60%, var(--accent-3));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        ::selection { background: var(--selection-bg); color: var(--selection-text); }