/* ============================================================
   Seismic theme — light/dark via OS preference
   Loaded AFTER output.css. No manual toggle. Auto-adapts.
   Updated: 2026-04-19
   ============================================================ */

/* ---- 1. DARK theme (default) — readability bumps ---------- */
:root {
    /* Body text contrast bump (was a0a0a0 — too dim on #0a0a0a) */
    --color-text-secondary: #c8c8c8;
    --color-text-muted: #8a8a8a;
}

/* ---- 2. LIGHT theme — auto from OS preference -------------- */
@media (prefers-color-scheme: light) {
    :root {
        /* Tailwind theme tokens */
        --color-text-primary: #0a0a0a;
        --color-text-secondary: #3a3a3a;
        --color-text-muted: #666666;
        --color-surface: #f1f1f1;
        --color-border-default: #e2e2e2;
        /* accent + accent-hover unchanged — work in both modes */
    }

    /* ---- 2a. Body + arbitrary-hex Tailwind classes ---------- */
    body {
        background-color: #fafafa !important;
        color: #3a3a3a !important;
    }
    .bg-\[\#0a0a0a\]       { background-color: #fafafa !important; }
    .bg-\[\#141414\]       { background-color: #f1f1f1 !important; }
    .bg-\[\#1a1a1a\]       { background-color: #ffffff !important; }
    .border-\[\#2a2a2a\]   { border-color: #e2e2e2 !important; }
    .border-\[\#2a2a2a\]\/50 { border-color: #e2e2e2 !important; opacity: 0.5; }
    .text-\[\#f0f0f0\]     { color: #3a3a3a !important; }

    /* ---- 2b. Glass cards + gradient mesh (page 'hero' bg) --- */
    .glass-card {
        background: rgba(255, 255, 255, 0.7) !important;
        border: 1px solid #e2e2e2 !important;
    }
    .gradient-mesh {
        background:
            radial-gradient(at 20% 0%,  rgba(99, 102, 241, 0.10) 0, transparent 50%),
            radial-gradient(at 80% 20%, rgba(129, 140, 248, 0.10) 0, transparent 50%),
            radial-gradient(at 50% 80%, rgba(79, 70, 229, 0.08) 0, transparent 50%),
            #fafafa !important;
    }
    .gradient-text {
        background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* ---- 2c. Decorative effects that fight a light bg ------- */
    #neural-canvas { opacity: 0.25; }
    section.gradient-mesh img[aria-hidden="true"] { opacity: 0.06 !important; }

    /* ---- 2d. Amber accents (guarantee box, table indicators) - */
    .text-amber-200       { color: #92400e !important; }
    .text-amber-400       { color: #b45309 !important; }
    .bg-amber-500\/10     { background-color: #fef3c7 !important; }
    .border-amber-500\/20 { border-color: #fbbf24 !important; }

    /* ---- 2e. Other accent washes that get washed out -------- */
    .bg-accent\/5         { background-color: rgba(99, 102, 241, 0.06) !important; }
    .text-red-400         { color: #b91c1c !important; }
    .text-emerald-400     { color: #047857 !important; }

    /* ---- 2f. Site nav (components.js) — was dark glass ------ */
    .nav-glass {
        background: rgba(250, 250, 250, 0.85) !important;
        border-bottom: 1px solid rgba(226, 226, 226, 0.7) !important;
    }
    .nav-solid {
        background: rgba(250, 250, 250, 0.95) !important;
        border-bottom: 1px solid #e2e2e2 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    }
    /* Header logo is white-on-transparent — invert luminance for light bg */
    #main-nav img[src*="header-logo"] {
        filter: invert(1) hue-rotate(180deg) saturate(0.85);
    }
    /* Footer uses bg-surface which themes via --color-surface, no extra needed */

    /* ---- 2g. Surface tokens used by components ------------- */
    .bg-surface           { background-color: #f1f1f1 !important; }
    .bg-surface\/95       { background-color: rgba(241, 241, 241, 0.95) !important; }
    .border-border-default { border-color: #e2e2e2 !important; }

    /* ---- 2h. KB article callouts (inline styles bypass auto-injector) - */
    .method-callout {
        background: #eef0ff !important;
        border-left-color: #6366f1 !important;
    }
    .method-callout p,
    .method-callout strong { color: #18181b !important; }
    .method-callout a { color: #4f46e5 !important; }

    /* Generic inline-style escape hatch for the most common dark inline values */
    [style*="background: #14163a"] { background: #eef0ff !important; }
    [style*="background:#14163a"]  { background: #eef0ff !important; }
    [style*="color: #d0d0d0"]      { color: #3a3a3a !important; }
    [style*="color: #f0f0f0"]      { color: #0a0a0a !important; }
    [style*="color: #e0e0e0"]      { color: #18181b !important; }
    [style*="color: #a5b4fc"]      { color: #4f46e5 !important; }
    [style*="color: #fff"]         { color: #0a0a0a !important; }
}

/* ---- 3. Repair Tailwind purge gap ------------------------- */
/* `gap-5` not compiled into output.css; this restores it. */
.gap-5 { gap: 1.25rem; }

/* ---- 4. Anchor-jump offset so headings clear sticky nav --- */
section[id] { scroll-margin-top: 96px; }