/* Theme (theme.js): accent colours and the header theme picker. Load after styles.css.
   Each accent has a light-mode colour and a lighter one for dark mode (more specific, so it wins in dark). */
:root[data-accent="teal"]   { --accent: #0e8a8a; }
:root[data-accent="green"]  { --accent: #1a8a4a; }
:root[data-accent="purple"] { --accent: #7a4fd6; }
:root[data-accent="orange"] { --accent: #c8580f; }
:root[data-accent="rose"]   { --accent: #cf3567; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="teal"]   { --accent: #2bb5b5; }
  :root:not([data-theme="light"])[data-accent="green"]  { --accent: #3cc47a; }
  :root:not([data-theme="light"])[data-accent="purple"] { --accent: #a284f2; }
  :root:not([data-theme="light"])[data-accent="orange"] { --accent: #f0935a; }
  :root:not([data-theme="light"])[data-accent="rose"]   { --accent: #f0739c; }
}
:root[data-theme="dark"][data-accent="teal"]   { --accent: #2bb5b5; }
:root[data-theme="dark"][data-accent="green"]  { --accent: #3cc47a; }
:root[data-theme="dark"][data-accent="purple"] { --accent: #a284f2; }
:root[data-theme="dark"][data-accent="orange"] { --accent: #f0935a; }
:root[data-theme="dark"][data-accent="rose"]   { --accent: #f0739c; }

/* header picker */
.theme-wrap { position: relative; display: inline-flex; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.theme-btn:hover, .theme-btn[aria-expanded="true"] { background: var(--bg); color: var(--text); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 248px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.theme-pop h4 { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.theme-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg); border-radius: 9px; padding: 3px; }
.theme-modes button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: var(--muted); border-radius: 7px; padding: 7px 4px; font: inherit; font-size: 12px; cursor: pointer; }
.theme-modes button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-modes button[aria-pressed="true"] { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.theme-modes button:focus-visible, .theme-swatches button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; background: var(--sw); }
.theme-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sw); }
@media (max-width: 680px) { .theme-btn { width: 32px; height: 32px; } }