/* Dark mode layer. Loaded after every other stylesheet and only active when
   <html data-theme="dark"> is set by js/theme.js. Nothing here changes light mode. */

html[data-theme="dark"] {
  --dm-bg: #0f0f10;
  --dm-surface: #18181b;
  --dm-surface-hover: #212125;
  --dm-border: #2c2c31;
  --dm-text: #ececec;
  --dm-muted: #9a9aa0;
  --dm-accent: #ef6a4a;
  --dm-link: var(--dm-accent);
  color-scheme: dark;
  background-color: var(--dm-bg);
}

/* Base */
html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); border-left-color: var(--dm-border); }
html[data-theme="dark"] body.adobe { border-image: linear-gradient(#ED1C24, var(--dm-bg)) 1; }
html[data-theme="dark"] body.mgp { border-image: linear-gradient(#ec008c, var(--dm-bg)) 1; }
html[data-theme="dark"] body.cisco { border-image: linear-gradient(#049fd9, var(--dm-bg)) 1; }
html[data-theme="dark"] body.pubmatic { border-image: linear-gradient(#50c9ed, var(--dm-bg)) 1; }
html[data-theme="dark"] body.te { border-image: linear-gradient(#31a466, var(--dm-bg)) 1; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] strong { color: inherit; }
html[data-theme="dark"] a { color: var(--dm-link); }
html[data-theme="dark"] :is(p, h1, h2, h3, h4, h5, h6, .slide-text) > a,
html[data-theme="dark"] a.back { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
html[data-theme="dark"] hr { border-top-color: var(--dm-border); }
html[data-theme="dark"] .dark-text,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .page-content .role:hover { color: var(--dm-text); }
html[data-theme="dark"] .light-txt,
html[data-theme="dark"] .dark-light-text,
html[data-theme="dark"] .new-article h5 { color: var(--dm-muted) !important; }
html[data-theme="dark"] h2.page-title { color: var(--dm-text) !important; }
html[data-theme="dark"] h2.page-title a { color: var(--dm-muted) !important; }

/* Accent */
html[data-theme="dark"] .theme-color,
html[data-theme="dark"] .lock,
html[data-theme="dark"] .menu-wrapper header nav ul li.active > a { color: var(--dm-accent); }
html[data-theme="dark"] h5.underline,
html[data-theme="dark"] .roleh5 { border-bottom-color: var(--dm-accent); }

/* Highlights keep their yellow, with dark text for contrast */
html[data-theme="dark"] .highlighted,
html[data-theme="dark"] span.tag { background: #e8d466; color: #111; }

/* Header and nav */
html[data-theme="dark"] .menu-wrapper header .logo a { color: var(--dm-text); border-color: #d6d6d6; }
html[data-theme="dark"] .menu-wrapper header nav ul li a,
html[data-theme="dark"] .social-icons a,
html[data-theme="dark"] .tabs ul li a { color: var(--dm-text); }
html[data-theme="dark"] .menu-wrapper header nav ul li.active > a { color: var(--dm-accent); }
html[data-theme="dark"] .menu-wrapper header .mobile-menu .line,
html[data-theme="dark"] .menu-wrapper header .mobile-menu .line:before,
html[data-theme="dark"] .menu-wrapper header .mobile-menu .line:after { background-color: var(--dm-text); }
@media (max-width: 991px) {
  html[data-theme="dark"] .menu-wrapper header nav { background-color: var(--dm-bg); }
  html[data-theme="dark"] .menu-wrapper header nav ul li { border-bottom-color: var(--dm-border); }
}

/* Buttons */
html[data-theme="dark"] button.btn-custom { border-color: var(--dm-text); background: transparent; color: var(--dm-text) !important; }
html[data-theme="dark"] button.btn-custom:hover { background-color: var(--dm-text); color: var(--dm-bg) !important; }
html[data-theme="dark"] .count { border-color: var(--dm-text); }

/* Story tiles */
html[data-theme="dark"] div.tile { background: var(--dm-surface); box-shadow: none; border: 1px solid var(--dm-border); }
html[data-theme="dark"] div.tile:hover { background-color: var(--dm-surface-hover); }
html[data-theme="dark"] a div.tile.case,
html[data-theme="dark"] a div.tile.project,
html[data-theme="dark"] a div.tile.case span.theme-color,
html[data-theme="dark"] a div.tile.case:hover span.theme-color { color: var(--dm-text); }
html[data-theme="dark"] div.tile.case .details p { color: var(--dm-muted); }
html[data-theme="dark"] div.bordered { border-color: var(--dm-border); }
html[data-theme="dark"] div.bordered .triangle { border-top-color: var(--dm-border); }

/* Case-study imagery: soften the white edges of screenshots */
html[data-theme="dark"] .story-img,
html[data-theme="dark"] .slide.shadow { box-shadow: 0 0 0 1px var(--dm-border) !important; }

/* Photos on a white background: swap in a cut-out version (original file untouched) */
html[data-theme="dark"] img[src$="mygympals/concept2.jpg"] { content: url("/images/projects/mygympals/concept2-transparent.png"); }

/* Story-tile and logo-wall logos are mostly black on transparent: render them as white */
html[data-theme="dark"] img.story-logo,
html[data-theme="dark"] img.index-logo { filter: brightness(0) invert(1); }

/* Blog and form leftovers from the template */
html[data-theme="dark"] .blog-entry blockquote { background-color: var(--dm-surface); }
html[data-theme="dark"] .blog-list .blog-title a,
html[data-theme="dark"] .blog-list p,
html[data-theme="dark"] .blog-entry p,
html[data-theme="dark"] .blog-entry ul li,
html[data-theme="dark"] .atom-work-item a,
html[data-theme="dark"] .atom-work-item .desc h5,
html[data-theme="dark"] .atom-work-item .desc p,
html[data-theme="dark"] .atom-portfolio-filter a { color: var(--dm-text); }
html[data-theme="dark"] .atom-form input,
html[data-theme="dark"] .atom-form textarea { background-color: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); }
html[data-theme="dark"] .ip-header { background: var(--dm-bg); }

/* Toggle button (added to the nav by js/theme.js) */
.theme-toggle { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; line-height: 1; }
.theme-toggle:focus-visible { outline: 2px solid #dd4d2c; outline-offset: 4px; }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }