/* ============================================================
   Tinkered Thinking — Dark Mode
   Loaded on every page; all theme rules are gated behind
   html[data-theme="dark"] so light mode is untouched.
   ============================================================ */

:root {
  --dm-bg:        #15171a;  /* page background        */
  --dm-surface:   #1b1e23;  /* header / footer / boxes */
  --dm-surface-2: #262a30; /* hover / raised          */
  --dm-text:      #c8ccd0;  /* primary text            */
  --dm-text-soft: #9aa0a6;  /* secondary / dates       */
  --dm-text-dim:  #6f757b;  /* tertiary                */
  --dm-border:    #2a2e34;
  --dm-accent:    #f1e9c2;  /* gold (replaces purple in dark mode) */
  --dm-gold:      #f1e9c2;  /* links / superscripts    */
  --dm-gold-soft: #efe7c4;  /* whiteish gold for notes */
}

/* ---- gentle fade when flipping the switch ---- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] header,
html[data-theme="dark"] footer,
html[data-theme="dark"] .mobile-menu-container,
html[data-theme="dark"] .subscribe-container {
  /* Keep `top` in the list so the header still slides on scroll (the base rule
     animates `top`); this shorthand would otherwise drop it and make the header
     snap in dark mode. */
  transition: top 200ms ease, background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}

/* ---- base surfaces ---- */
html[data-theme="dark"] body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .prompt-header,
html[data-theme="dark"] .mobile-menu-container {
  background-color: var(--dm-surface);
  border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] footer {
  background-color: var(--dm-surface);
}

html[data-theme="dark"] #sidebarMenu {
  background: #1b1e23f0;
  border-left-color: var(--dm-border);
}

html[data-theme="dark"] .column.middle {
  border-left-color: var(--dm-border);
}

html[data-theme="dark"] .headerBorder,
html[data-theme="dark"] .postBorder,
html[data-theme="dark"] .footer-bar {
  border-color: var(--dm-border) !important;
}

/* ---- typography / text colors ---- */
html[data-theme="dark"] .tinkered-thinking,
html[data-theme="dark"] .indie-letters,
html[data-theme="dark"] .logo,
html[data-theme="dark"] .tt-title,
html[data-theme="dark"] .image-box,
html[data-theme="dark"] .column.left {
  color: var(--dm-text);
}

html[data-theme="dark"] .navlink {
  color: var(--dm-text);
}
html[data-theme="dark"] .navlink:hover {
  color: var(--dm-accent);
}

html[data-theme="dark"] .article-box h2,
html[data-theme="dark"] .permalink-title,
html[data-theme="dark"] .recommended-heading {
  color: #d7dadd;
}

html[data-theme="dark"] .what-blurb,
html[data-theme="dark"] .lp-announcement,
html[data-theme="dark"] .enthusiastic-notice,
html[data-theme="dark"] .most-popular p,
html[data-theme="dark"] .date,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .feed-copy-btn {
  color: var(--dm-gold);
  border-color: var(--dm-border);
  background: transparent;
}
html[data-theme="dark"] .feed-copy-btn:hover {
  background: #262b33;
  border-color: var(--dm-gold);
  color: #ffffff;
}
html[data-theme="dark"] .feed-copy-btn.copied {
  color: #7bd88f;
  border-color: #7bd88f;
}

html[data-theme="dark"] .feed-title,
html[data-theme="dark"] .feed,
html[data-theme="dark"] .copywrite,
html[data-theme="dark"] .footer-link {
  color: var(--dm-text-soft);
}

/* ---- links / accents ---- */
html[data-theme="dark"] .internal-link,
html[data-theme="dark"] .external-link,
html[data-theme="dark"] #pagination_controls a {
  color: var(--dm-accent) !important;
}
html[data-theme="dark"] .z-footer a {
  color: var(--dm-text-soft);
}

/* expanding embedded notes: depth cycle (soft gold → soft teal → soft rose) */
html[data-theme="dark"] .embednote-content,
html[data-theme="dark"] .embednote-content[data-en-depth="1"] {
  color: var(--dm-gold-soft) !important;
}
html[data-theme="dark"] .embednote-content[data-en-depth="2"] {
  color: #7eb8bf !important;
}
html[data-theme="dark"] .embednote-content[data-en-depth="3"] {
  color: #c98b94 !important;
}

/* footnote superscripts slowly pulse; color follows depth */
@keyframes dm-gold-white-pulse {
  0%, 100% { color: var(--dm-gold); }
  50%      { color: #ffffff; }
}
@keyframes dm-teal-white-pulse {
  0%, 100% { color: #7eb8bf; }
  50%      { color: #ffffff; }
}
@keyframes dm-rose-white-pulse {
  0%, 100% { color: #c98b94; }
  50%      { color: #ffffff; }
}
html[data-theme="dark"] .embednote-sup,
html[data-theme="dark"] .embednote-trigger[data-en-depth="1"] .embednote-sup {
  color: var(--dm-gold) !important;
  animation: dm-gold-white-pulse 3.6s ease-in-out infinite !important;
}
html[data-theme="dark"] .embednote-trigger[data-en-depth="2"] .embednote-sup {
  color: #7eb8bf !important;
  animation: dm-teal-white-pulse 3.6s ease-in-out infinite !important;
}
html[data-theme="dark"] .embednote-trigger[data-en-depth="3"] .embednote-sup {
  color: #c98b94 !important;
  animation: dm-rose-white-pulse 3.6s ease-in-out infinite !important;
}

/* ---- subscribe / rss boxes ---- */
html[data-theme="dark"] .subscribe-container {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .subscribe-container:hover {
  background-color: #262a30;
}
html[data-theme="dark"] .subscribe-container h2 {
  color: var(--dm-text-soft);
}
html[data-theme="dark"] .subscribe-container h2:hover {
  color: var(--dm-text);
}
html[data-theme="dark"] #name,
html[data-theme="dark"] #email,
html[data-theme="dark"] #m,
html[data-theme="dark"] #n,
html[data-theme="dark"] #e {
  background-color: #0f1114;
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] ::placeholder { color: var(--dm-text-dim); }

/* submit buttons (subscribe, contact) */
html[data-theme="dark"] input[type="submit"] {
  background-color: #1f232a;
  color: var(--dm-gold);
  border: 1px solid var(--dm-border);
  border-radius: 6px;
  padding: 7px 22px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
html[data-theme="dark"] input[type="submit"]:hover {
  background-color: #262b33;
  border-color: var(--dm-gold);
  color: #ffffff;
}

/* ---- mobile slide-out menu ---- */
html[data-theme="dark"] #mobile-menu {
  background: var(--dm-surface);
}
html[data-theme="dark"] #mobile-menu li a {
  color: var(--dm-text);
  border-top-color: var(--dm-border);
}

/* ---- hamburger / triangle menu lines ---- */
html[data-theme="dark"] .spinner,
html[data-theme="dark"] .spinner-2 { background-color: var(--dm-text); }
html[data-theme="dark"] .arrow-head,
html[data-theme="dark"] .arrow-head-2,
html[data-theme="dark"] .arrow-head-horizontal,
html[data-theme="dark"] .arrow-head-horizontal-2 {
  border-color: var(--dm-text);
}

/* ---- post body text authored via the composer ----
   Posts pasted into the contenteditable composer often carry inline
   styles like style="color: rgb(0,0,0)" or <font color="#555555">,
   which beat normal stylesheet rules. Force any in-post element that
   declares an inline color back to the theme text. !important is what
   lets a stylesheet win over an inline style. Title links and accent
   links carry no inline color, so they're untouched. */
html[data-theme="dark"] .raw-post [style*="color"],
html[data-theme="dark"] .raw-post font[color],
html[data-theme="dark"] .raw-post font {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .raw-post [style*="color"] a,
html[data-theme="dark"] .raw-post a[style*="color"] {
  color: var(--dm-accent) !important;
}

/* ============================================================
   The fun part: invert imagery so photos read as negatives
   and line-art/logos sit naturally on the dark canvas.
   Add class "no-invert" to any <img> that should be left alone.
   ============================================================ */
html[data-theme="dark"] img:not(.no-invert),
html[data-theme="dark"] .play-btn,
html[data-theme="dark"] .play-btn.pause,
html[data-theme="dark"] .album-image {
  filter: invert(1) hue-rotate(180deg);
}

/* SpinChess icon: leave it exactly as-is (no inversion). */
html[data-theme="dark"] img.spinchess-app-img {
  filter: none;
}

/* Lucilius Parables book covers (front + behind): no inversion. */
html[data-theme="dark"] img.lp-side-bar-image {
  filter: none;
}

/* Repause icon: invert, but cap the whites to grey so it isn't so stark.
   brightness(<1) pulls pure white down toward grey. */
html[data-theme="dark"] img.meditation-app-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.78) contrast(0.92);
}

/* ============================================================
   The switch — a small, low-contrast floating glyph.
   Base styles load in both themes (this file is always linked).
   ============================================================ */
#dm-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b8b8b8;
  cursor: pointer;
  opacity: 0.35;
  padding: 0;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 220ms ease, color 220ms ease, transform 220ms ease;
}
#dm-toggle:hover {
  opacity: 0.9;
  transform: rotate(12deg);
}
#dm-toggle svg {
  width: 18px;
  height: 18px;
}
html[data-theme="dark"] #dm-toggle {
  color: var(--dm-text-soft);
}