/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO — DARK MODE
   Loaded on every page except pong. Activated by html[data-theme="dark"]
   (set early by the anti-flash snippet, toggled by assets/theme.js).
   Palette: deep blue-black (almost-but-not-quite black), cream text,
   the yellow accent is kept. about.html gets a "Windows XP at night" skin.
   ═══════════════════════════════════════════════════════════════ */

/* Smooth cross-fade when toggling (applies in both themes) */
body { transition: background-color .4s ease, color .4s ease; }
.nav-link::after, .icon-btn, .pill-btn, .work-card-arrow,
nav.scrolled, footer hr, .meta-val, .body, .quote {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

/* ─────────────────────────────────────────────────────────────
   SHARED TOKEN REMAP
   The modern pages reuse "ink" vars (--black / --text) for BOTH text
   and small dark UI bits. Flipping ink → cream inverts text, underlines
   and thin rules correctly; the few "filled ink" buttons then become a
   light chip on a dark page (mirrors the light-mode logic) — we only
   recolor their inner text to dark below.
   ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --black: #e9e9ec;        /* primary text (cream)            was #0d0d0d */
  --text:  #e9e9ec;        /* playground primary text          */
  --gray:  #98a1b2;        /* muted text / icons              was #888   */
  --text-light: #98a1b2;   /* playground muted                 */
  --gray-light: #2f3a4f;   /* borders, hairlines, dividers    was #d8d6d1 */
  --bg:    #0b0f1a;        /* page background                 was #fafafa */
  --bg-alt: #182134;       /* playground image placeholders    */
  /* greens stay dark (used as solid surfaces); numbers brightened below */
}

/* ===============================================================
   INDEX (index.html) — literal-hex based, explicit overrides
   =============================================================== */
html[data-theme="dark"] body {
  background-color: #0b0f1a !important;
  background-image: none !important;
  color: #e9e9ec !important;
}
html[data-theme="dark"] .loading-screen { background: #141d30; }
/* keep the curtain reveal working: must yield to .splitting (transparent) so
   the page — and the hero stagger — show THROUGH the parting curtains.
   Without this, the dark rule's higher specificity holds the screen opaque
   during the split and the entrance plays hidden behind it. */
html[data-theme="dark"] .loading-screen.splitting { background: transparent; }
html[data-theme="dark"] .loading-bar-track { background: rgba(233,233,236,0.12); }

html[data-theme="dark"] nav.scrolled {
  background: rgba(11,15,26,0.90) !important;
  border-bottom-color: #232c3e !important;
}
html[data-theme="dark"] .nav-brand,
html[data-theme="dark"] .nav-link { color: #e9e9ec; }
html[data-theme="dark"] .nav-link::after { background: #e9e9ec; }

html[data-theme="dark"] #hero-title,
html[data-theme="dark"] .hero-subtitle a,
html[data-theme="dark"] .work-card-title,
html[data-theme="dark"] .about-name,
html[data-theme="dark"] .footer-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2 { color: #e9e9ec; }
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .work-card-year,
html[data-theme="dark"] .about-role { color: #98a1b2; }
html[data-theme="dark"] .about-bio .dark { color: #e9e9ec; }
html[data-theme="dark"] .about-bio .muted { color: #7f8798; }
html[data-theme="dark"] .footer-credit { color: #7f8798; }

/* round icon + pill buttons (index) */
html[data-theme="dark"] .icon-btn { border-color: #2f3a4f; color: #e9e9ec; }
html[data-theme="dark"] .icon-btn:hover { color: #0c111d; }      /* on yellow */
html[data-theme="dark"] .work-card-arrow { border-color: #2f3a4f; color: #e9e9ec; }
html[data-theme="dark"] .work-card:hover .work-card-arrow { color: #0c111d; }
html[data-theme="dark"] .pill-btn.outline { border-color: #2f3a4f; color: #e9e9ec; }
html[data-theme="dark"] .pill-btn.outline .arrow-wrap { border-color: #2f3a4f; }
html[data-theme="dark"] .pill-btn.outline:hover .arrow-wrap svg,
html[data-theme="dark"] .pill-btn.filled .arrow-wrap svg { color: #0c111d; }
html[data-theme="dark"] footer hr { border-top-color: #232c3e; }
html[data-theme="dark"] #progress-bar { background: #e9e9ec; }

/* hero figma cursors: the dark (#0d0d0d) labels & arrows vanish on the dark
   page — make all of them light like the "Product Designer" chip */
html[data-theme="dark"] .figma-cursor .cursor-label {
  background: #ffffff !important;
  color: #0d0d0d !important;
}
html[data-theme="dark"] .figma-cursor svg path {
  fill: #ffffff !important;
  stroke: rgba(0,0,0,0.18) !important;
}

/* ===============================================================
   CASE STUDIES (picpay-card / picpay-shop / itau-cards)
   Shared classes; --black/--gray/--gray-light remapped above.
   Override the remaining literal hexes (white cards, gray text, greens).
   =============================================================== */
html[data-theme="dark"] .hero-desc { color: #c4cad6; }
html[data-theme="dark"] .body { color: #b9c0cd; }
html[data-theme="dark"] .nm-step-label,
html[data-theme="dark"] .usage-headline-text,
html[data-theme="dark"] .usage-val { color: #aeb6c4; }
html[data-theme="dark"] .usage-group-total b,
html[data-theme="dark"] .nd { color: #c4cad6; }

/* white / light panels → dark raised surfaces.
   .navmap / .usage / .fwk-card sit directly on the page in light mode (no card
   surface), so they stay transparent in dark too — only the image frame is raised. */
html[data-theme="dark"] .inline-shot { background: #131a29; border-color: #283143; }
html[data-theme="dark"] .nd { background: #1b2436; color: #c4cad6; }
html[data-theme="dark"] .nd.mix,
html[data-theme="dark"] .fw-chip.mix { background: #222c40; color: #aab2c2; }
html[data-theme="dark"] .usage-group-head { border-bottom-color: #283143; }
html[data-theme="dark"] .nm-step-num { background: #5b6678; }
html[data-theme="dark"] .usage-expand { color: #aeb6c4; }
html[data-theme="dark"] .usage-expand:hover { color: #e9e9ec; }

/* green accents → brighter so they read on dark */
html[data-theme="dark"] .metric-num,
html[data-theme="dark"] .usage-big,
html[data-theme="dark"] .impact-num,
html[data-theme="dark"] .wc-title { color: #34d39a; }
html[data-theme="dark"] .quote { border-left-color: #34d39a; }
html[data-theme="dark"] .fwk-band.discover { background: #1b2436; color: #e9e9ec; }

/* ── Review fixes (Vic): case-study dark-mode contrast ── */
/* "What changed" descriptions used a hardcoded #444 — invisible on dark */
html[data-theme="dark"] .wc-desc { color: #b9c0cd; }
/* usage table: dark labels/tags + light chart bars never got remapped */
html[data-theme="dark"] .usage-label { color: #c4cad6; }
html[data-theme="dark"] .usage-tag { color: #d3b15a; }
html[data-theme="dark"] .usage-tag.ent { color: #e8837b; }
html[data-theme="dark"] .usage-track { background: #232d42; }
/* keep the fills their light-mode colors (incl. yellow/red duplicate markers);
   only the base/neutral fill is lightened so it reads on the dark track */
html[data-theme="dark"] .usage-fill:not(.dup):not(.dent) { background: #6b7488; }
/* the Enabler dot is near-black green — outline it so it reads on dark */
html[data-theme="dark"] .fw-dot.enabler { box-shadow: inset 0 0 0 1px #6f7e76; }
/* red "negative" chips: lift the wash + text so they're legible on dark */
html[data-theme="dark"] .fw-chip.neg { background: rgba(232,96,86,.20); color: #f0978f; }
html[data-theme="dark"] .fw-chip.pos { background: rgba(52,211,154,.16); color: #4bdba0; }
/* phone bezel was #16181a on a near-black page — give it a light-gray rim */
html[data-theme="dark"] .fwk-phone {
  background: #1c2230;
  box-shadow: 0 0 0 1px #5a6678, 0 26px 50px -26px rgba(0,0,0,.6);
}

/* ===============================================================
   LOCKED (locked.html) — var-driven + a few literals
   "filled ink" buttons become a cream chip; recolor their text to dark.
   =============================================================== */
html[data-theme="dark"] .top-nav { background: transparent; }
html[data-theme="dark"] .title-sub,
html[data-theme="dark"] .helper-text { color: #b9c0cd; }
html[data-theme="dark"] input.pw {
  background: rgba(255,255,255,0.04);
  border-color: #2f3a4f;
  color: #e9e9ec;
}
html[data-theme="dark"] input.pw:focus {
  background: rgba(255,255,255,0.07);
  border-color: #e9e9ec;
  box-shadow: 0 0 0 4px rgba(233,233,236,0.06);
}
html[data-theme="dark"] .lock-icon,
html[data-theme="dark"] button.submit { color: #0c111d; }
html[data-theme="dark"] button.submit:hover { background: #cdced1; }
html[data-theme="dark"] .linkedin-btn { border-color: #2f3a4f; }
html[data-theme="dark"] .linkedin-btn:hover { background: rgba(233,233,236,0.05); border-color: #e9e9ec; }
html[data-theme="dark"] .linkedin-btn .arrow-wrap { color: #0c111d; }
html[data-theme="dark"] .divider-or i { color: #98a1b2; }
html[data-theme="dark"] .project-badge { background: rgba(233,233,236,0.07); color: #b9c0cd; }

/* ===============================================================
   PLAYGROUND (playground.html) — mostly var-driven
   =============================================================== */
html[data-theme="dark"] .placeholder,
html[data-theme="dark"] .img-wrapper { background: #182134; }
html[data-theme="dark"] .ph-label { color: rgba(233,233,236,0.22); }
html[data-theme="dark"] .pg-tag {
  background: rgba(18,24,38,0.92);
  border-color: rgba(233,233,236,0.10);
}
html[data-theme="dark"] .floating-text { -webkit-text-stroke-color: rgba(233,233,236,0.07); }
html[data-theme="dark"] .floating-text.accent { -webkit-text-stroke-color: rgba(230,212,89,0.10); }
html[data-theme="dark"] .export-btn { color: #0c111d; }   /* dark text on cream chip */
html[data-theme="dark"] .footer-credit { color: #7f8798; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT (about.html) — "WINDOWS XP AT NIGHT"
   Keep the Y2K pink/purple glow, drop the desktop & windows into a
   deep midnight skin. about is fully var-driven, so remap its :root
   tokens, then darken the chrome gradients (titlebars / taskbar).
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --pink-pale: #0c1024;     /* desktop background       */
  --pink-baby: #141a33;     /* faint panels             */
  --pink-light: #3a3566;    /* borders / soft lines     */
  --pink-deep: #e7e3ff;     /* primary text (was deep purple) */
  --purple-y2k: #b9aef0;    /* secondary headings glow  */
  --lilac: #b9aef0;
  --pink-hot: #e29ac4;      /* hot accent (kept, glows on dark) */
  --win-gray: #2a3048;      /* window chrome panels     */
  --silver: #2a3048;
  --white: #161d33;         /* window body background   */
  --star-yellow: #f0d97a;
}
/* desktop grid + sparkle still read; deepen the base */
html[data-theme="dark"] body { background: #0c1024; color: #e7e3ff; }
html[data-theme="dark"] .desktop-bg,
html[data-theme="dark"] .desktop { background-color: #0c1024; }

/* window chrome */
html[data-theme="dark"] .win-titlebar {
  background: linear-gradient(180deg, #4a4080, #2c2456, #3a2f63);
  color: #f3f0ff;
}
html[data-theme="dark"] .win-titlebar.lilac {
  background: linear-gradient(180deg, #5a3a66, #93507f, #5a3a66);
}
html[data-theme="dark"] .window-frame { border-color: #93507f; }
html[data-theme="dark"] .win-menu-bar { background: #232842; border-bottom-color: #0d1124; color: #c9c4ec; }
html[data-theme="dark"] .win-btn { background: #2a3048; border-color: #4a4470 #14182c #14182c #4a4470; color: #e7e3ff; }
html[data-theme="dark"] .status-bar { background: #232842; border-top-color: #3a3566; color: #cdc8ee; }

/* profile sidebar / badges / exp cards */
html[data-theme="dark"] .profile-sidebar { background: linear-gradient(180deg, #141a33, #10142a); border-right-color: #3a3566; }
html[data-theme="dark"] .badge { background: linear-gradient(90deg, #141a33, #1c2240); border-color: #3a3566; color: #d7d2f5; }
html[data-theme="dark"] .badge:hover { background: #e29ac4; color: #1a0f22; }
html[data-theme="dark"] .exp-item,
html[data-theme="dark"] .exp-stat { background: #141a33; border-color: #3a3566; }
html[data-theme="dark"] .exp-clickable:hover { background: #1b2240; }
html[data-theme="dark"] .exp-date { color: #8f88b5; }
html[data-theme="dark"] .photo-tag,
html[data-theme="dark"] .blink-text { color: #f0a8d0; }

/* body copy & dialogs that used hardcoded dark grays (#555 / #333) */
html[data-theme="dark"] .bio-text,
html[data-theme="dark"] .exp-detail-desc { color: #cfc9ee; }
html[data-theme="dark"] .bio-subtitle { color: #b9aef0; }
html[data-theme="dark"] .paint-status { color: #aaa3cf; border-top-color: #3a3566; }
html[data-theme="dark"] .dialog-text { color: #e7e3ff; }
html[data-theme="dark"] .dialog-btn { color: #e7e3ff; background: #2a3048; border-color: #4a4470 #14182c #14182c #4a4470; }
html[data-theme="dark"] .dialog-btn:hover { background: #93507f; color: #fff; }
html[data-theme="dark"] .exp-detail-date { color: #9a93c0; }
html[data-theme="dark"] .start-menu { border-color: #4a4470 #14182c #14182c #4a4470; }
html[data-theme="dark"] .start-menu-item { color: #e7e3ff; }
html[data-theme="dark"] .start-menu-divider { background: #3a3566; }
html[data-theme="dark"] .webring { color: #9a93c0; }

/* taskbar + start button (the night "Luna" bar) */
html[data-theme="dark"] .taskbar {
  background: linear-gradient(180deg, #2a2358, #1a1640, #100c2c);
  border-top-color: #4a4080;
}
html[data-theme="dark"] .start-btn {
  background: linear-gradient(180deg, #3a8f4a, #1f6b32);
  border-color: #5fd07a #103a18 #103a18 #5fd07a;
}
html[data-theme="dark"] .taskbar-divider { background: #4a4080; }
html[data-theme="dark"] .taskbar-item { background: linear-gradient(180deg, #2c2858, #211c48); border-color: #4a4080 #14102c #14102c #4a4080; }
html[data-theme="dark"] .taskbar-item.active { background: linear-gradient(180deg, #181436, #2a2552); }
html[data-theme="dark"] .taskbar-tray { background: linear-gradient(180deg, #14102e, #0d0a22); border-color: #14102c; }
html[data-theme="dark"] .start-menu-header { background: linear-gradient(180deg, #93507f, #4a4080); }

/* scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0c1024; border-left-color: #3a3566; }
html[data-theme="dark"] ::-webkit-scrollbar-button { background: #2a3048; }

/* paint / photo placeholder areas keep their checker but darker */
html[data-theme="dark"] .photo-area,
html[data-theme="dark"] .paint-canvas-area { background-color: #1c2240; }