/* =====================================================================
   DARK MODE  -  sport-with-r.com
   Active when <html data-theme="dark">. The attribute is set before the
   page paints by _partials/theme.html (saved choice, else system setting),
   and switched by the sun/moon button in the header.
   Light mode = the site as before: nothing here applies without the attribute.
   ===================================================================== */

:root{ color-scheme:light; }

html[data-theme="dark"]{
  color-scheme:dark;
  /* site tokens (styles.css) */
  --body:#11161f;          /* page background */
  --ink:#e3e8ee;           /* main text, titles */
  --muted:#a3afbd;         /* secondary text */
  --accent-deep:#7fb6cc;   /* links (was a dark teal, unreadable on dark) */
  --line:#2a3442;          /* separators */
  /* Bootstrap / Quarto tokens */
  --bs-body-bg:#11161f;
  --bs-body-color:#e3e8ee;
  --bs-emphasis-color:#e3e8ee;
  --bs-border-color:#2a3442;
  --bs-link-color:#7fb6cc;
  --bs-link-hover-color:#a8d4e6;
  --bs-heading-color:#e3e8ee;
}
html[data-theme="dark"] body{ background-color:var(--body) !important; color:var(--ink); }
html[data-theme="dark"] h2{ border-bottom-color:var(--line) !important; }
html[data-theme="dark"] hr{ border-color:var(--line); opacity:1; }

/* ---------- HOME ---------- */
html[data-theme="dark"] .btn-ghost{ color:var(--ink); border-color:#3a4659; }
html[data-theme="dark"] .btn-ghost:hover{ background:#1d2633; border-color:var(--accent); }
html[data-theme="dark"] .work-head{ border-top-color:var(--line); }
/* navy cards sit on a near-navy page: a thin edge keeps them distinct */
html[data-theme="dark"] .work,
html[data-theme="dark"] .quarto-listing .card{ box-shadow:0 0 0 1px #263245; }
html[data-theme="dark"] .work:hover,
html[data-theme="dark"] .quarto-listing .card:hover{ box-shadow:0 0 0 1px #34435a, 0 10px 30px rgba(0,0,0,.45); }

/* ---------- ARTICLES ---------- */
/* the migrated posts hard-code their text colours inline; [style*=] + !important wins over inline styles */
html[data-theme="dark"] main [style*="#252424"]{ color:var(--ink) !important; }
html[data-theme="dark"] main [style*="#524D4B" i],
html[data-theme="dark"] main [style*="#403a38" i]{ color:var(--muted) !important; }
html[data-theme="dark"] main [style*="#AB412E" i]{ color:#e8826c !important; }   /* section titles */
html[data-theme="dark"] main [style*="#162e70" i]{ color:#9db8ff !important; }   /* function names in tutorials */
html[data-theme="dark"] main [style^="color:#1a2332" i]{ color:var(--ink) !important; }
html[data-theme="dark"] .swr-cat{ color:#ef7b7b; }
html[data-theme="dark"] main :not(pre) > code:not(.sourceCode){ background:#22304a !important; }
html[data-theme="dark"] .swr-closing-start{ border-top-color:var(--line); }
html[data-theme="dark"] hr.swr-article-sep{ border-top-color:var(--line); }
html[data-theme="dark"] blockquote{ color:var(--muted); border-left-color:#3a4659; }
html[data-theme="dark"] .table{ --bs-table-color:var(--ink); --bs-table-bg:transparent; --bs-table-border-color:var(--line); }

/* GitHub bookmark card + file cards */
html[data-theme="dark"] .kg-bookmark-container{ background:#1a2332; border-color:#2c384a; }
html[data-theme="dark"] .kg-bookmark-container:hover{ border-color:var(--accent); }
html[data-theme="dark"] .kg-bookmark-metadata{ color:var(--ink); }
html[data-theme="dark"] .kg-bookmark-icon{ filter:invert(1); }            /* black GitHub logo */
html[data-theme="dark"] .kg-file-card-container:hover{ background:rgba(142,209,231,.08); }

/* ---------- GALLERY (its own <style> block forces a light body) ---------- */
html[data-theme="dark"] .gallery-item{ border-color:#263245; }

/* ---------- DATAVIZ INSPIRATION ---------- */
html[data-theme="dark"] .links-page .lp-intro p:not(.lp-cta){ color:var(--ink) !important; }
html[data-theme="dark"] .links-page .lp-filters{ box-shadow:0 0 0 1px #263245; }
html[data-theme="dark"] .links-page .lp-legend{ color:var(--muted); }

/* ---------- FOOTER ---------- */
html[data-theme="dark"] .swr-foot{ border-top-color:var(--line); }
html[data-theme="dark"] .foot a{ color:var(--nav); }
html[data-theme="dark"] .foot-icons svg{ fill:var(--nav); }

/* ---------- THEME TOGGLE BUTTON (inserted in the header by theme.html) ---------- */
.swr-theme-btn{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(176,190,197,.35);
  background:transparent; color:var(--nav); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; transition:all .2s ease; }
.swr-theme-btn:hover{ color:var(--nav-hover); border-color:var(--nav-hover); background:rgba(79,195,247,.12); }
.swr-theme-btn svg{ width:17px; height:17px; fill:currentColor; }
.swr-theme-btn .ico-sun{ display:none; }
html[data-theme="dark"] .swr-theme-btn .ico-sun{ display:block; }
html[data-theme="dark"] .swr-theme-btn .ico-moon{ display:none; }