/* Theme chrome only. Product images, mockup filters and color swatches stay untouched. */
:root {
  color-scheme: light;
  --bg: #f7f6f4;
  --paper: #ffffff;
  --surface: #f0eeec;
  --hover: #eae7e5;
  --ink: #252326;
  --muted: #6d676b;
  --quiet: #716a6f;
  --line: #ded9d9;
  --accent: #c92b36;
  --accent-hover: #ab202c;
  --accent-text: #ae2330;
  --accent-soft: #fbeaec;
  --accent-border: #e4a4ab;
  --accent-on: #ffffff;
  --success-bg: #e7f3eb;
  --success-ink: #2c6b44;
  --success-line: #b7d6c2;
  --pending-bg: #fff3d5;
  --pending-ink: #795915;
  --pending-line: #e4cc90;
  --changes-bg: #fbe9e7;
  --changes-ink: #9d3f37;
  --changes-line: #dfb0aa;
  --overlay: #11101480;
  --shadow: 0 24px 80px #1710141f;
  --soft-shadow: 0 3px 12px #1710140a;
  --ps-bg: #e6edfa;
  --ps-ink: #396298;
  --ps-line: #c7d7ed;
  /* Compatibility with the original component palette. */
  --green: var(--accent);
  --green-dark: #201d20;
  --soft: var(--accent-soft);
  --lime: var(--accent-on);
  --red: var(--changes-ink);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131315;
  --paper: #1e1d20;
  --surface: #272529;
  --hover: #322e33;
  --ink: #f2eeee;
  --muted: #b9b0b5;
  --quiet: #a99da4;
  --line: #3b353c;
  --accent: #ef515a;
  --accent-hover: #ff7078;
  --accent-text: #ff959c;
  --accent-soft: #3a2328;
  --accent-border: #82505a;
  --accent-on: #210c10;
  --success-bg: #203a2b;
  --success-ink: #a6d9b7;
  --success-line: #3e664c;
  --pending-bg: #3b311d;
  --pending-ink: #e8cb87;
  --pending-line: #6e5b31;
  --changes-bg: #402528;
  --changes-ink: #efb0a9;
  --changes-line: #7a4649;
  --overlay: #050407bd;
  --shadow: 0 24px 80px #00000066;
  --soft-shadow: 0 3px 12px #00000024;
  --ps-bg: #183553;
  --ps-ink: #a0c9fb;
  --ps-line: #355a80;
}

body { color: var(--ink); background: var(--bg); }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: var(--accent);
}
input[type="checkbox"], .card-check, .library-toolbar input { accent-color: var(--accent); }
.muted { color: var(--muted); }
.brand-word i, .studio-brand > span { color: var(--accent); }
.loader { border-color: var(--line); border-top-color: var(--accent); }
.button { background: var(--paper); border-color: var(--line); color: var(--ink); }
.button:hover { background: var(--hover); }
.button.primary, .review-send {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
.button.primary:hover, .review-send:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.button.danger { background: #b32634; border-color: #b32634; color: #fff; }
.button.danger:hover { background: #98202b; border-color: #98202b; }
.button.subtle { background: transparent; }
.button.subtle:hover { background: var(--hover); }
.icon-btn { color: var(--muted); }
.icon-btn:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Navigation and the optional theme control. */
.studio-header { background: var(--paper); border-color: var(--line); }
.studio-brand { color: var(--ink); }
.studio-brand small { color: var(--muted); border-color: var(--line); }
.studio-nav button, .collaborator-button, .project-menu > summary { color: var(--muted); }
.studio-nav button.active { color: var(--accent-text); border-color: var(--accent); }
.avatar { background: var(--accent-soft); color: var(--accent-text); }
.project-menu > div { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow); }
.project-menu button, .project-menu a { color: var(--ink); }
.project-menu button:hover, .project-menu a:hover { background: var(--hover); }
.project-menu [data-action="close-project"] { color: var(--changes-ink); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface); color: var(--ink);
  font-size: 13px; line-height: 1.3; white-space: nowrap; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--hover); border-color: var(--accent-border); }
.theme-toggle [data-theme-icon] { display: inline-flex; align-items: center; }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-label { font-size: 13px; }
.project-kicker, .shot-number { color: var(--quiet); }
.project-progress { color: var(--muted); }
.project-progress > div { background: var(--line); }
.project-progress i { background: var(--accent); }
.download-all { box-shadow: var(--soft-shadow); }

/* Filters and content cards. The media regions keep their original colors. */
.asset-filters, .shot-row { border-color: var(--line); }
.model-switch { background: var(--surface); }
.model-switch button { color: var(--muted); }
.model-switch button.active { background: var(--paper); color: var(--ink); box-shadow: var(--soft-shadow); }
.filter-select, input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: var(--paper); border-color: var(--line); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--quiet); }
.search, .search svg { color: var(--quiet); }
.search input { background: transparent; color: var(--ink); }
.search input::placeholder { color: var(--quiet); }
.color-chip { color: var(--muted); }
.color-chip:hover { background: var(--hover); }
.color-chip.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.filter-reset, .board-caption { color: var(--muted); }
.board-caption strong { color: var(--ink); }
.caption-dot { color: var(--quiet); }
.pending-key { background: var(--quiet); }
.shot-title h2 span, .master-state { color: var(--muted); }
.shot-model { background: var(--accent-soft); color: var(--accent-text); }
.shot-model.submin { background: var(--surface); color: var(--muted); }
.master-state.ready { color: var(--success-ink); }
.text-button { color: var(--muted); }
.text-button:hover { color: var(--accent-text); }
.ps-icon, .review-canvas-footer .ps-icon {
  background: var(--ps-bg); color: var(--ps-ink); border-color: var(--ps-line);
}
.deliverable-card, .file-card { background: var(--paper); color: var(--ink); border-color: var(--line); }
.deliverable-card:hover, .file-card:hover { border-color: var(--accent-border); box-shadow: var(--soft-shadow); }
.deliverable-card.is-approved { border-color: var(--success-line); }
.file-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slot-add, .slot-version, .card-subtitle, .card-bottom { color: var(--quiet); }
.file-color, .card-title .color-name { color: var(--muted); }
.file-stage, .model-tag, .mini-tag { color: #49434a; }
.file-image .file-no-preview, .no-preview-symbol, .image-unavailable::after { color: #625e64; }
.sort-control select { background: transparent; color: var(--muted); }
.source-note, .source-note p, .reference-note, .reference-heading { color: var(--muted); }
.brief-actions p { color: var(--muted); }
.studio-footer, .studio-footer button, .project-footer, .project-footer button { color: var(--quiet); }

/* Status remains semantic in both themes. */
.status.pending, .deliverable-status, .review-status-label .status.pending {
  background: var(--pending-bg); color: var(--pending-ink);
}
.status.changes, .deliverable-status.changes, .review-status-label .status.changes {
  background: var(--changes-bg); color: var(--changes-ink);
}
.status.approved, .deliverable-status.approved, .review-status-label .status.approved {
  background: var(--success-bg); color: var(--success-ink);
}

/* Uploads, metadata forms, project actions and the guide. */
.modal-overlay { background: var(--overlay); }
.modal { background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
.modal-header, .modal-footer { background: var(--bg); border-color: var(--line); }
.modal-header p, .field, .field small { color: var(--muted); }
.upload-item, .panel, .comment { background: var(--paper); border-color: var(--line); }
.upload-item-head span, .upload-filename { color: var(--quiet); }
.upload-progress { color: var(--muted); }
.upload-defaults { background: var(--surface); }
.upload-defaults h3 { color: var(--ink); }
.dropzone { background: var(--surface); border-color: var(--accent-border); color: var(--muted); }
.dropzone strong { color: var(--ink); }
.dropzone > svg { color: var(--accent-text); }
.dropzone.dragover { background: var(--accent-soft); border-color: var(--accent); }
.banner { background: var(--surface); border-color: var(--line); color: var(--muted); }
.banner strong { color: var(--ink); }
.error-banner { background: var(--changes-bg); border-color: var(--changes-line); color: var(--changes-ink); }
.error-banner strong, .upload-progress.error, .inline-error { color: var(--changes-ink); }
.panel p, .guide-list, .label-guide { color: var(--muted); }
.guide-step, .label-guide { border-color: var(--line); }
.step-num { background: var(--accent-soft); color: var(--accent-text); }
.code-example { background: var(--surface); border-color: var(--line); color: var(--ink); }
.label-guide strong { color: var(--ink); }
.empty { background: var(--surface); border-color: var(--line); }
.empty-symbol { background: var(--paper); border-color: var(--line); color: var(--accent-text); }
.empty p, .no-results, .closed-page p { color: var(--muted); }
.toast { background: #282329; color: #fff; box-shadow: var(--shadow); }
.toast.error { background: #a52532; }

/* Compact progress matrix. */
.matrix-wrap, .matrix td:first-child { background: var(--paper); }
.matrix th { background: var(--surface); color: var(--muted); border-color: var(--line); }
.matrix td { border-color: var(--line); }
.matrix tr:hover td { background: var(--surface); }
.matrix-shot b { color: var(--ink); }
.matrix-shot span, .matrix-shot svg { color: var(--muted); }
.matrix-cell { background: var(--surface); border-color: var(--line); color: var(--quiet); }
.matrix-cell.pending { background: var(--pending-bg); border-color: var(--pending-line); color: var(--pending-ink); }
.matrix-cell.changes { background: var(--changes-bg); border-color: var(--changes-line); color: var(--changes-ink); }
.matrix-cell.approved { background: var(--success-bg); border-color: var(--success-line); color: var(--success-ink); }
.matrix-cell:hover { border-color: var(--accent); }

/* Review chrome follows the theme; the photo canvas stays neutral and dark. */
.modal.review-modal { background: var(--paper); border-color: var(--line); color: var(--ink); }
.review-modal .modal-header { background: var(--paper); border-color: var(--line); }
.review-modal .modal-header p, .review-modal .modal-header .icon-btn,
.review-title-divider { color: var(--muted); }
.review-visual, .review-canvas { background: #171717; }
.review-canvas { scrollbar-color: #595959 #202020; }
.review-toolbar, .review-canvas-footer { background: var(--surface); border-color: var(--line); }
.review-version > span, .review-zoom > span { color: var(--quiet); }
.review-version select, .review-status-section .review-row select {
  background: var(--paper); border-color: var(--line); color: var(--ink);
}
.review-zoom .icon-btn, .review-fit { color: var(--muted); }
.review-zoom .icon-btn:hover { background: var(--hover); color: var(--ink); }
.review-pin-toggle, .review-button {
  background: var(--paper); border-color: var(--line); color: var(--ink);
}
.review-button:hover { background: var(--hover); }
.review-pin-toggle.active {
  background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text);
}
.review-image-pin { background: #c92b36; color: #fff; border-color: #fff; }
.review-image-pin:hover, .review-image-pin.selected {
  background: #9c1525; box-shadow: 0 0 0 6px #f0616b44, 0 2px 12px #00000060;
}
.review-image-pin.pending { background: #c92b36; color: #fff; outline-color: #f0616b55; }
.review-image-pin.resolved { background: #386648; color: #fff; border-color: #bdd9c3; }
.review-canvas-footer strong { color: var(--ink); }
.review-canvas-footer > div > span, .review-canvas-footer > .icon-btn { color: var(--muted); }
.review-canvas-footer > .icon-btn.on { color: var(--accent-text); }
.review-source-note { background: var(--surface); color: var(--muted); }
.review-sidebar { background: var(--paper); border-color: var(--line); }
.review-status-section, .review-thread-tabs, .review-comment { border-color: var(--line); }
.review-status-label > span:first-child, .review-status-section > p { color: var(--muted); }
.review-thread-heading h3 { color: var(--ink); }
.review-thread-heading h3 > span { color: var(--quiet); }
.review-thread-tabs button { color: var(--muted); }
.review-thread-tabs button.active { color: var(--accent-text); border-color: var(--accent); }
.review-threads { scrollbar-color: var(--line) var(--paper); }
.review-comment.selected { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--accent-soft); }
.review-avatar { background: var(--surface); color: var(--ink); }
.review-comment-head strong { color: var(--ink); }
.review-comment-head time { color: var(--quiet); }
.review-comment-pin { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.review-comment > p { color: var(--ink); }
.review-comment.resolved > p { color: var(--muted); }
.review-resolve { color: var(--muted); }
.review-resolve:hover { color: var(--accent-text); }
.review-resolve.is-resolved { color: var(--success-ink); }
.review-comment-form { background: var(--surface); border-color: var(--line); }
.review-comment-form textarea { background: var(--paper); border-color: var(--line); color: var(--ink); }
.review-comment-form textarea::placeholder, .review-form-footer > span { color: var(--quiet); }
.review-pending-pin { background: var(--accent-soft); border-color: var(--accent-border); }
.review-pending-pin > span, .review-pending-pin .icon-btn { color: var(--accent-text); }
.review-preview-action { background: var(--surface); color: var(--muted); }
.review-preview-action label { color: var(--accent-text); }
.review-empty-comments, .review-empty-comments p { color: var(--muted); }
.review-empty-comments strong { color: var(--ink); }
.review-no-preview { color: #bcbcbc; }
.review-no-preview strong { color: #ededed; }

/* The PSD helper creates this panel with inline styles. Only its chrome is overridden. */
#packshot-psd-progress {
  background: var(--paper) !important; color: var(--ink) !important;
  border-color: var(--line) !important; box-shadow: var(--shadow) !important;
}
#packshot-psd-progress progress { accent-color: var(--accent) !important; }
#packshot-psd-progress a { color: var(--accent-text) !important; }
#packshot-psd-progress button {
  background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important;
}
#packshot-psd-progress button:hover { background: var(--hover) !important; }

@media (max-width: 600px) {
  .theme-toggle { min-width: 32px; min-height: 32px; padding: 6px; }
  .theme-label { display: none; }
}

/* Keep Photoshop's icon visible when narrow review controls hide their labels. */
.review-canvas-footer .review-button .ps-icon { display: inline-flex; }

@media (max-width: 360px) {
  .project-actions { flex-wrap: wrap; }
  .project-actions .button { width: 100%; flex: 1 1 100%; }
}