/* Shared color tokens. Explicit preference wins; the media query also works without JS. */
:root {
  color-scheme: light;
  --paper: #f8f5ee;
  --ink: #20392e;
  --muted: #566359;
  --green: #245d4b;
  --soft: #edf0e6;
  --line: #dcded2;
  --surface: #fffdf8;
  --surface-raised: #ffffff;
  --control-border: #6c7e71;
  --focus: #8c4a21;
  --button-bg: #245d4b;
  --button-text: #fffdf8;
  --button-hover: #194536;
  --clay: #9b432c;
  --warm: #8c4a21;
  --cream: #edf0e6;
  --white: var(--surface);
  --brand-dot: #e8bc81;
  --selection-bg: #d7e6cd;
  --selection-text: #20392e;
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111c18;
  --ink: #e6eee7;
  --muted: #b3c2b7;
  --green: #acd8bc;
  --soft: #22382c;
  --line: #43574a;
  --surface: #192a21;
  --surface-raised: #21362b;
  --control-border: #789780;
  --focus: #f3c88d;
  --button-bg: #a9d8b8;
  --button-text: #10291b;
  --button-hover: #bce4c6;
  --clay: #e3a68a;
  --warm: #f3c88d;
  --cream: #22382c;
  --brand-dot: #264c35;
  --selection-bg: #496a53;
  --selection-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --paper: #111c18;
    --ink: #e6eee7;
    --muted: #b3c2b7;
    --green: #acd8bc;
    --soft: #22382c;
    --line: #43574a;
    --surface: #192a21;
    --surface-raised: #21362b;
    --control-border: #789780;
    --focus: #f3c88d;
    --button-bg: #a9d8b8;
    --button-text: #10291b;
    --button-hover: #bce4c6;
    --clay: #e3a68a;
    --warm: #f3c88d;
    --cream: #22382c;
    --brand-dot: #264c35;
    --selection-bg: #496a53;
    --selection-text: #ffffff;
  }
}

/* Replace legacy literal backgrounds without changing illustrations or layout. */
html, body, .site-header, .main-nav { background-color: var(--paper); }
body, .guide-reading .article-body { color: var(--ink); }
::selection { background: var(--selection-bg); color: var(--selection-text); }
:focus-visible { outline-color: var(--focus); }

.skip-link { background: var(--surface-raised); color: var(--ink); z-index: 1000; }
.brand-symbol { background: var(--button-bg); color: var(--button-text); }
.brand-symbol span { color: var(--brand-dot); }

button, .button {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-bg);
}
button:hover, .button:hover {
  background: var(--button-hover);
  color: var(--button-text);
  border-color: var(--button-hover);
}
.button { box-shadow: 0 4px 0 var(--line); }
.menu-toggle {
  background: transparent;
  color: var(--green);
  border-color: var(--control-border);
}
.menu-toggle:hover { background: var(--soft); color: var(--green); border-color: var(--control-border); }

input, select, textarea { accent-color: var(--green); }
.search-form input {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--control-border);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

.card, .cards .card, .faq-list, .pagination a, .guide-reading .table-wrap {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.card:hover, .cards .card:hover { border-color: var(--control-border); }
.featured-guides .card { border-top-color: var(--control-border); }
.category-tile { border-bottom-color: var(--line); }
.guide-kicker > a { border-color: var(--control-border); }
.pagination a { border-color: var(--control-border); }
.pagination a:hover { background: var(--soft); }
.pagination a[aria-current] {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-bg);
}

.article-intro, .guide-sidebar .toc, .guide-reading .references, .topic-directory {
  background: var(--soft);
  color: var(--ink);
}
.article-intro, .reading-companion { border-left-color: var(--clay); }
.guide-sidebar .toc ol { scrollbar-color: var(--control-border) transparent; }
.guide-reading .article-body blockquote { background: var(--soft); }
.guide-reading th, .guide-reading tr:nth-child(even) td {
  background: var(--soft);
  color: var(--ink);
}
.guide-reading td { color: var(--ink); }
.faq-item > summary:hover, .faq-item[open] > summary {
  background: var(--soft);
  color: var(--green);
}
.faq-item > summary:focus-visible { outline-color: var(--focus); }
.faq-answer { color: var(--muted); }

/* These two sections intentionally keep their own inverse palette in either theme. */
.site-footer, .practice-band {
  color-scheme: dark;
  --ink: #f8f5ee;
  --muted: #d7e0d9;
  --green: #e9cfad;
  --clay: #e9cfad;
  --line: #61786a;
  --control-border: #b3c2b7;
  --focus: #f3c88d;
  --button-bg: #f8f5ee;
  --button-text: #163b2b;
  --button-hover: #e1ecdf;
  color: var(--ink);
}
.site-footer { background: #1d3329; }
.practice-band { background: #245d4b; }
.site-footer a, .practice-band h2, .practice-band h3, .practice-grid > a, .practice-grid > a > span { color: var(--ink); }
.footer-grid p, .footer-bottom, .practice-band .section-heading > p { color: var(--muted); }
.footer-grid .footer-heading, .footer-brand span, .practice-grid > a > span:last-child { color: var(--green); }
.footer-bottom, .footer-grid nav, .practice-grid > a { border-color: var(--line); }
.site-footer a:focus-visible, .practice-band :focus-visible { outline-color: var(--focus); }

@media print {
  :root, html[data-theme="light"], html[data-theme="dark"], html:not([data-theme]) {
    color-scheme: light;
    --paper: #ffffff;
    --ink: #20392e;
    --muted: #566359;
    --green: #245d4b;
    --soft: #ffffff;
    --line: #9da99f;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --clay: #9b432c;
    --cream: #ffffff;
    --control-border: #6c7e71;
  }
  .practice-band {
    --ink: #20392e;
    --muted: #566359;
    --green: #245d4b;
    --line: #9da99f;
    background: #ffffff;
    color: var(--ink);
  }
}

@media (forced-colors: active) {
  :focus-visible, .faq-item > summary:focus-visible, .site-footer a:focus-visible, .practice-band :focus-visible {
    outline-color: Highlight;
  }
}