:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:        #0f1115;
    --bg-raised: #171a21;
    --grid:      #1c2029;      
    --text:      #e4e4e7;
    --text-dim:  #8b8f98;
    --border:    #2a2e37;
    --accent:    #ff8a5c;            
    --hl-bg:     rgba(255, 213, 25, .18);
    --hl-text:   #ffd95e;

    background-color: var(--bg);
}

:root[data-theme="dark"] body {
    background-color: var(--bg);
    color: var(--text);
}

:root[data-theme="dark"] body:not(:has(.home-nav)) {
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}

@media (max-width: 768px) {
    :root[data-theme="dark"] body:not(:has(.home-nav)) {
        background-image: none;
    }
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] q,
:root[data-theme="dark"] .headi,
:root[data-theme="dark"] .text p {
    color: var(--text);
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] #yu {
    text-shadow: none;
}

:root[data-theme="dark"] .intro p[style] {
    color: var(--text) !important;
}

:root[data-theme="dark"] #updated,
:root[data-theme="dark"] .note {
    color: var(--text-dim);
}

:root[data-theme="dark"] .highlight {
    background-color: var(--hl-bg);
    color: var(--hl-text);
    text-shadow: none;
}

/* ---------- nav ---------- */

:root[data-theme="dark"] nav a {
    color: var(--text);
}

:root[data-theme="dark"] nav a:hover {
    border-bottom-color: var(--text);
}

/* index.html paints a solid white bar behind the fixed nav */
:root[data-theme="dark"] .home-nav::before {
    background-color: var(--bg);
}

/* ---------- links ---------- */

:root[data-theme="dark"] .link {
    color: var(--accent);
}

/* ---------- boxes & borders ---------- */

:root[data-theme="dark"] section .proj div,
:root[data-theme="dark"] section .p1,
:root[data-theme="dark"] .email,
:root[data-theme="dark"] .conday,
:root[data-theme="dark"] q {
    border-color: var(--border);
}

:root[data-theme="dark"] section .proj div,
:root[data-theme="dark"] section .p1 {
    background-color: var(--bg-raised);
}

/* blog.html's .email box uses a light paper texture */
:root[data-theme="dark"] .email {
    background-image: none;
    background-color: var(--bg-raised);
}

/* ---------- form controls (blog.html subscribe box) ---------- */

:root[data-theme="dark"] button {
    background-color: var(--bg-raised);
    color: var(--text);
    border: 1px solid var(--border);
}

:root[data-theme="dark"] button:hover {
    background-color: #20242c;
}

:root[data-theme="dark"] #ema {
    background-color: #0b0d11;
    color: var(--text);
    border: 1px solid var(--border);
}

:root[data-theme="dark"] #ema::placeholder {
    color: var(--text-dim);
}

/* ---------- index.html polaroid cards ---------- */

:root[data-theme="dark"] .hp-card {
    border-color: #23262e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .hp-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .7);
}

/* ---------- icons ---------- */

/* the GitHub mark is solid black — invert it so it doesn't disappear.
   The LinkedIn image is a colour logo on white, so it's left alone. */
:root[data-theme="dark"] .gith img[src*="flaticon"] {
    filter: invert(1);
}

/* ---------- unused-but-styled helpers in style.css ---------- */

:root[data-theme="dark"] .jj,
:root[data-theme="dark"] .n a {
    background-image: none;
    background-color: var(--bg-raised);
    color: var(--text);
    -webkit-text-fill-color: var(--text);
}

/* ---------- optional: take the glare off photos/video ----------
:root[data-theme="dark"] .gro img,
:root[data-theme="dark"] .goo img,
:root[data-theme="dark"] .imges img,
:root[data-theme="dark"] .vid {
    filter: brightness(.88);
}
*/

/* ============================================================
   the toggle button itself (visible in both themes)
   ============================================================ */

.theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10001;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    background-color: #fff;
    background-image: none;
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: transform .2s, box-shadow .2s;
}

.theme-toggle:hover {
    transform: scale(1.08) translateY(-3px);
}

.theme-toggle:active {
    transform: scale(.94);
}

:root[data-theme="dark"] .theme-toggle {
    background-color: #1b1f27;
    border-color: #2f343d;
    color: #ffd95e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}