/* Dark mode (F32, 2026-10-10). The theme is set on <html data-theme> before
   first paint by an inline script in base.njk: a saved choice wins,
   otherwise the device setting. Light mode is styles.css untouched; every
   rule here is scoped to [data-theme="dark"], except the toggle's label swap.
   Same shapes as light mode, dark neutral palette, chips/buttons inverted. */

/* Toggle label: one button, the label matching what a click will do. */
.theme-toggle .t-light { display: none; }
:root[data-theme="dark"] .theme-toggle .t-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .t-light { display: inline; }
/* In the phone menu, line up with Category / Social / Pages. */
@media (max-width: 768px) {
  .theme-toggle { align-self: flex-start; }
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body { background-color: #121214; color: #e6e6e6; }

/* Header, nav, menus */
:root[data-theme="dark"] .top-bar,
:root[data-theme="dark"] .dropdown-content,
:root[data-theme="dark"] .dropdown-category-content {
  background-color: #1b1b1f;
  border-color: #2a2a30;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* The nav: flat on desktop (it sits on the top bar), a dropdown panel on phones. */
:root[data-theme="dark"] .menu { background-color: #1b1b1f; box-shadow: none; }
@media (max-width: 768px) {
  :root[data-theme="dark"] .menu { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
}
:root[data-theme="dark"] .home-link,
:root[data-theme="dark"] .menu-toggle,
:root[data-theme="dark"] .dropbtn,
:root[data-theme="dark"] .dropbtn-category,
:root[data-theme="dark"] .dropdown-content a,
:root[data-theme="dark"] .menu ul li a { color: #f2f2f2; }
:root[data-theme="dark"] .dropbtn:hover,
:root[data-theme="dark"] .dropbtn-category:hover { background-color: #f2f2f2; color: #111; }
:root[data-theme="dark"] .dropdown-content a:hover { background-color: #26262b; }

/* Grey chips (Category menu, related categories, tags, image-page links) */
:root[data-theme="dark"] .dropdown-category-content a,
:root[data-theme="dark"] .related-cats a,
:root[data-theme="dark"] .image-tags a,
:root[data-theme="dark"] .image-nav a { background-color: #26262b; color: #e6e6e6; }
:root[data-theme="dark"] .dropdown-category-content a:hover,
:root[data-theme="dark"] .related-cats a:hover,
:root[data-theme="dark"] .image-tags a:hover,
:root[data-theme="dark"] .image-nav a:hover { background-color: #f2f2f2; color: #111; }

/* Search */
:root[data-theme="dark"] .search-input {
  background-color: #1b1b1f;
  border-color: #33333a;
  color: #f2f2f2;
  box-shadow: none;
}
:root[data-theme="dark"] .search-input::placeholder { color: #8a8a93; }
:root[data-theme="dark"] .search-button { background-color: #f2f2f2; border-color: #f2f2f2; color: #111; }
:root[data-theme="dark"] .search-button:hover { background-color: #d9d9de; }

/* Heading card + category header (intro, Top/New toggle) */
:root[data-theme="dark"] .heading2 {
  background-color: #1b1b1f;
  color: #f2f2f2;
  box-shadow: 0 0 0 1px #2a2a30;
}
:root[data-theme="dark"] .cat-head .cat-intro { color: #a8a8b0; }
:root[data-theme="dark"] .cat-intro a { color: #e6e6e6; }
:root[data-theme="dark"] .sort-toggle { background-color: #26262b; }
:root[data-theme="dark"] .sort-toggle a { color: #d9d9de; }
:root[data-theme="dark"] .sort-toggle a:hover,
:root[data-theme="dark"] .sort-toggle a.on { background-color: #f2f2f2; color: #111; }

/* Grid, vote and download buttons */
:root[data-theme="dark"] .grid-item img,
:root[data-theme="dark"] .image-page-img { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .vote-btn,
:root[data-theme="dark"] .category-button {
  background-color: #1b1b1f;
  border-color: #e6e6e6;
  color: #f2f2f2;
}
:root[data-theme="dark"] .vote-btn.upvote:hover,
:root[data-theme="dark"] .category-button:hover { background: #1f3a24; border-color: #fff; }
:root[data-theme="dark"] .vote-btn.downvote:hover { background: #3a1f22; border-color: #fff; }
:root[data-theme="dark"] .vote-btn.download:hover { background: #1f2440; border-color: #fff; }

/* White cards: legal pages, image pages, related, FAQ */
:root[data-theme="dark"] main,
:root[data-theme="dark"] .related-cats,
:root[data-theme="dark"] .cat-faq,
:root[data-theme="dark"] .top-images-section {
  background-color: #1b1b1f;
  color: #e6e6e6;
  box-shadow: 0 0 0 1px #2a2a30;
}
:root[data-theme="dark"] main h1,
:root[data-theme="dark"] main h2,
:root[data-theme="dark"] main h3 { color: #f2f2f2; }
:root[data-theme="dark"] main p,
:root[data-theme="dark"] main li,
:root[data-theme="dark"] .cat-faq p,
:root[data-theme="dark"] main.image-page p.image-facts { color: #b4b4bc; }
:root[data-theme="dark"] main a,
:root[data-theme="dark"] .cat-faq a { color: #9ecbff; }
:root[data-theme="dark"] main.image-page .image-tags a,
:root[data-theme="dark"] main.image-page .image-nav a { color: #e6e6e6; }
:root[data-theme="dark"] main.image-page .image-tags a:hover,
:root[data-theme="dark"] main.image-page .image-nav a:hover { color: #111; }
:root[data-theme="dark"] .crumbs { color: #8a8a93; }
:root[data-theme="dark"] .crumbs a { color: #e6e6e6; }

/* 404 category list (styles.css gives every `ul li` an alert look) */
:root[data-theme="dark"] ul li { background-color: #2a1c1e; color: #f0c4c8; border-color: #4a2a2e; }

/* Avatar preview: the card goes dark; each mock switches to its app's dark look. */
:root[data-theme="dark"] .avatar-preview {
  background-color: #1b1b1f;
  color: #e6e6e6;
  box-shadow: 0 0 0 1px #2a2a30;
}
:root[data-theme="dark"] .ap figcaption b { color: #e6e6e6; }
:root[data-theme="dark"] .ap-instagram .ap-mock,
:root[data-theme="dark"] .ap-tiktok .ap-mock,
:root[data-theme="dark"] .ap-x .ap-mock { background-color: #000; box-shadow: inset 0 0 0 1px #2a2a30; color: #e7e9ea; }
:root[data-theme="dark"] .ap-instagram .ap-av img,
:root[data-theme="dark"] .ap-x .ap-av img { border-color: #000; }
:root[data-theme="dark"] .ap-banner { background-color: #333639; }
:root[data-theme="dark"] .ap-x small { color: #71767b; }
:root[data-theme="dark"] .ap-more a { background-color: #26262b; color: #e6e6e6; }
:root[data-theme="dark"] .ap-more a:hover { background-color: #f2f2f2; color: #111; }

/* PFP Cropper (tools.css) */
:root[data-theme="dark"] main.tool-page p.tool-lead,
:root[data-theme="dark"] .cropper p.crop-empty { color: #a8a8b0; }
:root[data-theme="dark"] .crop-stage { background-color: #26262b; background-image: conic-gradient(#303036 25%, transparent 0 50%, #303036 0 75%, transparent 0); }
:root[data-theme="dark"] .crop-stage:focus-visible,
:root[data-theme="dark"] .crop-stage.drop { box-shadow: 0 0 0 3px #f2f2f2; }
:root[data-theme="dark"] .tool-btn { background-color: #f2f2f2; border-color: #f2f2f2; color: #111; }
:root[data-theme="dark"] .tool-btn:hover { background-color: #d9d9de; }
:root[data-theme="dark"] .tool-label { color: #e6e6e6; }
:root[data-theme="dark"] .crop-zoom { accent-color: #f2f2f2; }
:root[data-theme="dark"] .tool-seg { background-color: #26262b; }
:root[data-theme="dark"] .tool-seg button { color: #d9d9de; }
:root[data-theme="dark"] .tool-chips button { background-color: #26262b; color: #e6e6e6; }
:root[data-theme="dark"] .tool-seg button:hover,
:root[data-theme="dark"] .tool-seg button.on,
:root[data-theme="dark"] .tool-chips button:hover,
:root[data-theme="dark"] .tool-chips button.on { background-color: #f2f2f2; color: #111; }
:root[data-theme="dark"] .tool-help ol { color: #b4b4bc; }