/* ── Light palette (default) ─────────────────────────────── */
:root {
  --bg:               #fff;
  --bg-rgb:           255,255,255;
  --text:             #111;
  --text-muted:       rgba(0,0,0,.4);
  --text-strong:      #000;
  --border:           #f2f2f2;
  --border-mid:       #ededed;
  --link-line:        #d9d9d9;
  --link-line-hover:  #666;
  --hl:               #d9f26f;
  --hl-text:          #111;
}

/* ── Dark palette ────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:               #111;
  --bg-rgb:           17,17,17;
  --text:             #eaeaea;
  --text-muted:       rgba(234,234,234,.55);
  --text-strong:      #fff;
  --border:           #222;
  --border-mid:       #2c2c2c;
  --link-line:        rgba(234,234,234,.18);
  --link-line-hover:  rgba(234,234,234,.55);
  --hl:               #d9f26f;
  --hl-text:          #111;
  /* override main.css :root vars */
  --body-color:       #eaeaea;
  --body-bg:          #111;
  --heading-color:    #eaeaea;
  --selection-bg:     #d9f26f;
  --selection-color:  #111;
}

/* ── Base ────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
}

/* ── Top-of-page fade gradient ───────────────────────────── */
.site-container:before {
  background: linear-gradient(180deg,
    rgb(var(--bg-rgb)) 0,
    rgba(var(--bg-rgb),.738) 19%,
    rgba(var(--bg-rgb),.541) 34%,
    rgba(var(--bg-rgb),.382) 47%,
    rgba(var(--bg-rgb),.278) 56.5%,
    rgba(var(--bg-rgb),.194) 65%,
    rgba(var(--bg-rgb),.126) 73%,
    rgba(var(--bg-rgb),.075) 80.2%,
    rgba(var(--bg-rgb),.042) 86.1%,
    rgba(var(--bg-rgb),.021) 91%,
    rgba(var(--bg-rgb),.008) 95.2%,
    rgba(var(--bg-rgb),.002) 98.2%,
    rgba(var(--bg-rgb),0)
  );
}

/* ── Typography ──────────────────────────────────────────── */
body strong    { color: var(--text-strong); }
h1             { color: var(--text); }
h2             { color: var(--text-muted); }
time           { color: var(--text-muted); }
hr             { border-color: var(--border); }

/* hard-coded colors in main.css that need dark overrides */
.article > header h1   { color: var(--text) !important; }
.article > header time { color: var(--text-muted) !important; }

/* ── Links ───────────────────────────────────────────────── */
.basic-link:before       { background: var(--link-line); }
.basic-link:hover:before { background: var(--link-line-hover); }

/* ── Highlight device ────────────────────────────────────── */
.hl                     { background: var(--hl); color: var(--hl-text) !important; }
main .article p a       { background: var(--hl); color: var(--hl-text); }
::selection             { background: var(--hl) !important; color: var(--hl-text) !important; }
::-moz-selection        { background: var(--hl) !important; color: var(--hl-text) !important; }
.back-btn:hover         { background: var(--hl) !important; color: var(--hl-text) !important; }
.post-list>ul>li>ul>li>a:hover h2 {
  background: var(--hl) !important;
  color: var(--hl-text) !important;
}

/* ── Article nav ─────────────────────────────────────────── */
.back-btn { color: var(--text-muted); }
.back-btn:hover { color: var(--hl-text) !important; }

.toc-nav nav h2                          { color: var(--text-muted); }
.toc-nav nav h2:hover                    { color: var(--text); }
.toc-nav nav h2[data-active=true]        { color: var(--text); }
.toc-nav nav ul li a                     { color: var(--text-muted); }
.toc-nav nav ul li a:hover,
.toc-nav nav ul li[data-active=true] a  { color: var(--text); }
.toc-nav[data-variant=secondary] nav ul:before       { background-color: var(--border-mid); }
.toc-nav[data-variant=secondary] nav ul li a:before  { background-color: var(--text); }

/* ── Footer ──────────────────────────────────────────────── */
.footer-inner:before { background: var(--border-mid); }
.footer-inner p      { color: var(--text-muted); }
.footer-link         { color: var(--text-muted); }

/* ── Section title + post list ───────────────────────────── */
.section-title             { color: var(--text-muted); border-bottom-color: var(--border); }
.post-list>ul>li           { border-bottom-color: var(--border); }
.post-list>ul>li>ul>li>a:after { border-bottom-color: var(--border); }
.post-list>ul>li>ul>li>a h2    { color: var(--text); }
.post-list>ul>li>ul>li>a time  { color: var(--text-muted); }

/* ── Theme toggle button ─────────────────────────────────── */
.site-container { position: relative; }

#theme-toggle {
  position: absolute;
  top: 5.0625rem;
  right: 1rem;
  z-index: 100;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .1s ease, opacity .1s ease;
  -webkit-tap-highlight-color: transparent;
}
#theme-toggle:hover { opacity: .55; }

@media screen and (max-width: 768px) {
  #theme-toggle { top: 2.0625rem; right: 1.5rem; }
}

/* icon visibility controlled by data-theme on html */
#icon-sun  { display: none; }
#icon-moon { display: block; }
html[data-theme="dark"] #icon-sun  { display: block; }
html[data-theme="dark"] #icon-moon { display: none; }