/* Appearance tokens. Brand swatches stay fixed; surfaces and text adapt. */
:root {
  color-scheme: light;
  --brand-ink: #17251d;
  --surface: #fffdfa;
  --control: #fffdfa;
  --image-well: #eee8dc;
  --footer-bg: #17251d;
  --footer-ink: #fff9ed;
  --announcement-bg: #17251d;
  --announcement-ink: #fff9ed;
  --error: #913d58;
}

html[data-mode="dark"] {
  color-scheme: dark;
  --paper: #121c17;
  --ink: #f6f0e4;
  --wash: #1d2e24;
  --strong: #b9dda5;
  --muted: #b8c1b5;
  --line: #536a5b;
  --border: #789480;
  --surface: #1b2921;
  --control: #23352a;
  --image-well: #26382c;
  --secondary: #d69db5;
  --footer-bg: #0b1510;
  --footer-ink: #f6f0e4;
  --announcement-bg: #0b1510;
  --announcement-ink: #f6f0e4;
  --error: #ffb3c8;
}

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mode-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; height: 44px; flex: 0 0 auto; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: 3px;
  background: var(--control); color: var(--ink);
  font: 600 13px var(--font-body); line-height: 1; cursor: pointer;
}
.mode-toggle:hover { background: var(--wash); }
.mode-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mode-icon-light { display: none; }
html[data-mode="dark"] .mode-icon-light { display: block; }
html[data-mode="dark"] .mode-icon-dark { display: none; }

.announcement { background: var(--announcement-bg); color: var(--announcement-ink); }
.storefront .card { background: var(--surface); }
.storefront .card .wrap { background: var(--image-well); }
.storefront .tools input[type="search"], .storefront .tools select,
.storefront .contactform input, .storefront .contactform textarea,
.storefront .enquiry, .storefront .enquiry input, .storefront .enquiry textarea,
.storefront .sharerow input, .storefront .modal input,
.storefront .note, .storefront .pill, .storefront .lockedmsg {
  background: var(--control); color: var(--ink);
}
.storefront input::placeholder, .storefront textarea::placeholder { color: var(--muted); opacity: 1; }
.storefront .note.dim, .storefront .modal p { color: var(--muted); }
.storefront .pill.money { color: var(--strong); }
.storefront .err { color: var(--error); }
.storefront .vstage .vhint { color: #fff9ed; }

/* Pastel panels keep dark lettering in either appearance. */
.storefront .brand-button, .storefront .header-live,
.storefront .tag2.sale, .storefront .sale-banner,
.storefront .dept.on, .storefront .dept.on span, .storefront .dept.on i,
.storefront .view-tab[aria-pressed="true"],
.storefront .fbtn[aria-expanded="true"], .storefront .fbtn[aria-expanded="true"] span,
.storefront .tools .salebtn.on, .storefront .tools .salebtn.on span,
.storefront .path-card, .storefront .brand-ticker, .storefront .shop-note,
.storefront .card-chan, .storefront .card-chan .cname,
.storefront .card-chan .chandle, .storefront .card-chan .cblurb,
.storefront .card-chan .cgo { color: var(--brand-ink); }
.storefront .dept.on:hover { background: var(--accent); }
.storefront .fbtn[aria-expanded="true"] { background: var(--accent); }
.storefront .path-card, .storefront .card-chan, .storefront .note-mark,
.storefront .sale-banner, .storefront .tag2.sale { border-color: var(--brand-ink); }

.storefront footer { background: var(--footer-bg); color: var(--footer-ink); }
.storefront footer .chan { color: var(--footer-ink); border-color: var(--footer-ink); }
.storefront footer .chan:hover { background: var(--accent); color: var(--brand-ink); border-color: var(--accent); }
.storefront footer .fnav a, .storefront footer .updated { color: var(--footer-ink); }

html[data-mode="dark"] .storefront .bar,
html[data-mode="dark"] .storefront .tools,
html[data-mode="dark"] .storefront .card,
html[data-mode="dark"] .storefront .card .wrap,
html[data-mode="dark"] .storefront .view-tab,
html[data-mode="dark"] .storefront .dept,
html[data-mode="dark"] .storefront .fbtn,
html[data-mode="dark"] .storefront .pagehead,
html[data-mode="dark"] .storefront .contactform,
html[data-mode="dark"] .storefront .contactform input,
html[data-mode="dark"] .storefront .contactform textarea,
html[data-mode="dark"] .storefront .tools input,
html[data-mode="dark"] .storefront .tools select,
html[data-mode="dark"] .storefront .sheet,
html[data-mode="dark"] .storefront .close,
html[data-mode="dark"] .storefront .ghost { border-color: var(--line); }
html[data-mode="dark"] .storefront .sheet { border-top-color: var(--accent); }
html[data-mode="dark"] .storefront .tag2.archived { background: var(--control); color: var(--ink); }
html[data-mode="dark"] .storefront .lbkeys { color: #c9c4b9; }
html[data-mode="dark"] .storefront .sheetbg { background: rgba(0, 0, 0, .72); }
html[data-mode="dark"] .storefront .tools input,
html[data-mode="dark"] .storefront .tools select,
html[data-mode="dark"] .storefront .contactform input,
html[data-mode="dark"] .storefront .contactform textarea { border-color: var(--border); }
html[data-mode="dark"] .storefront .shop-note { background: #24394b; color: var(--ink); }
html[data-mode="dark"] .storefront .shop-note .note-mark { border-color: var(--border); }
html[data-mode="dark"] .storefront .card-chan { background: #294331; color: var(--ink); border-color: var(--border); }
html[data-mode="dark"] .storefront .card-chan:nth-child(2) { background: #48333f; }
html[data-mode="dark"] .storefront .card-chan:nth-child(3) { background: #4c3a2a; }
html[data-mode="dark"] .storefront .card-chan:nth-child(4) { background: #2c3e50; }
html[data-mode="dark"] .storefront .card-chan :is(.cname, .chandle, .cblurb, .cgo) { color: var(--ink); }

@media (max-width: 1100px) {
  .header-actions .header-live { display: none; }
}
@media (max-width: 760px) {
  .storefront .bar { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .storefront .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .storefront .nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 440px) {
  .mode-toggle { width: 44px; padding: 0; }
  .mode-toggle [data-mode-label] { display: none; }
}
@media (max-width: 360px) {
  .storefront .bar { padding-left: 16px; padding-right: 16px; }
}