/* ===== Theme Tokens (Light default) ===== */
:root{
    /* theme hint for form controls, scrollbars, etc */
    color-scheme: light;

    /* core */
    --bg: #ffffff;
    --surface: #ffffff;
    --fg: #111827;
    --muted: #6b7280;
    --line: rgba(17,24,39,.10);
    --shadow: 0 10px 30px rgba(0,0,0,.06);

    /* brand */
    --brand: #2563eb;
    --brand-2: #1d4ed8;

    /* UI */
    --radius: 16px;
    --radius-sm: 12px;
}

/* ===== Dark Theme Overrides ===== */
[data-theme="dark"]{
    color-scheme: dark;

    --bg: #070A12;
    --surface: rgba(255,255,255,.06);
    --fg: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --line: rgba(255,255,255,.12);
    --shadow: 0 18px 60px rgba(0,0,0,.45);

    --brand: #22d3ee;
    --brand-2: #7c3aed;
}

/* Example global usage (keep if you don’t already have equivalents) */
body{ background: var(--bg); color: var(--fg); }
.muted{ color: var(--muted); }


/* Mobile nav */
@media (max-width: 900px){
    .nav-toggle{ display:inline-flex; }
    .site-nav{
        display:none;
        position: absolute;
        right: 1rem;
        top: 64px;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
        padding: .5rem;
        width: min(92vw, 340px);
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }
    .site-nav.is-open{ display:flex; }
    .site-nav a{ width:100%; }
}