/* ═══════════════════════════════════════════
   DeqTeQ Shared Styles — Edit ONCE, applies everywhere
   ═══════════════════════════════════════════ */

/* ─── THEME VARIABLES ─── */
:root {
    --bg: #fdfdfc; --bg-alt: #f1f5f9; --surface: #fff;
    --bdr: #e2e8f0; --bdr2: #cbd5e1;
    --ink: #0f172a; --ink2: #334155; --ink3: #475569; --ink4: #64748b; --ink5: #94a3b8;
    --nav-bg: rgba(253,253,252,.88); --nav-bdr: rgba(226,232,240,.8);
    --dot: #cbd5e1;
    --tog-bg: #fff; --tog-bdr: #e2e8f0; --tog-clr: #64748b;
}
html.dark {
    --bg: #0f172a; --bg-alt: #020617; --surface: #1e293b;
    --bdr: #334155; --bdr2: #475569;
    --ink: #f1f5f9; --ink2: #e2e8f0; --ink3: #cbd5e1; --ink4: #94a3b8; --ink5: #64748b;
    --nav-bg: rgba(15,23,42,.95); --nav-bdr: rgba(255,255,255,.06);
    --dot: #1e293b;
    --tog-bg: #1e293b; --tog-bdr: #334155; --tog-clr: #94a3b8;
}

/* ─── BASE ─── */
* { box-sizing: border-box; }
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg); color: var(--ink);
    overflow-x: hidden;
    transition: background .4s, color .4s;
}

/* ─── NAV ─── */
.glass-nav {
    background: transparent !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-bdr) !important;
}

/* Logic for logo visibility */
.logo-blend {
    mix-blend-mode: multiply;
    transition: filter 0.4s;
}

html.dark .logo-blend {
    mix-blend-mode: normal;
    filter: brightness(1.2) contrast(1.1); /* Bump visibility in dark mode */
}

/* If user wants the logo to be white in dark mode, we could use:
   html.dark .logo-blend { filter: brightness(0) invert(1); }
   But for now we keep the maroon color. */
html.dark nav a:not(.nav-active) { color: var(--ink4) !important; }
html.dark nav a:hover { color: var(--ink) !important; }
#theme-toggle { background: var(--tog-bg); border: 1px solid var(--tog-bdr); color: var(--tog-clr); }

/* ─── DARK MODE UTILITY OVERRIDES ─── */
html.dark .bg-white { background: var(--surface) !important; }
html.dark .bg-slate-50 { background: var(--bg) !important; }
html.dark .bg-slate-100 { background: var(--bg-alt) !important; }
html.dark .text-slate-900 { color: var(--ink) !important; }
html.dark .text-slate-800 { color: var(--ink2) !important; }
html.dark .text-slate-700 { color: var(--ink2) !important; }
html.dark .text-slate-600 { color: var(--ink3) !important; }
html.dark .text-slate-500 { color: var(--ink4) !important; }
html.dark .text-slate-400 { color: var(--ink5) !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: var(--bdr) !important; }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.left { transform: translateX(-40px); }
.reveal.right { transform: translateX(40px); }
.reveal.active { opacity: 1; transform: none; }

/* ─── HERO DOT GRID ─── */
.hero-bg {
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 40px 40px;
}