/* Shared color tokens. The PNG detail background chooser intentionally stays independent. */
:root {
  --background:#f8faf9; --surface:#fff; --text:#263e3a; --muted:#5b6e68;
  --primary:#0b7771; --primary-hover:#095f5b; --on-primary:#fff;
  --border:#dce5e1; --surface-soft:#f0f5f2; --surface-hover:#e7efea;
  --green-soft:#e8f3ee; --hero-background:#fcfdfb; --banner:#eaf0ec;
  --focus:#8a5a00; --card-a:#f3f5ef; --card-b:#f6f0e7; --card-c:#edf3e7; --card-d:#f2eeeb;
  --tint-a:#f5f1dc; --tint-b:#edf2e5; --tint-c:#f5ece3; --tint-d:#f0ecf7;
  --hero-a:#f7f0d9; --hero-b:#f5ece2; --hero-c:#eee9f7; --hero-d:#f7ecdf;
  --shadow:0 10px 28px #203e3110; --scrim:#10291d66; --toast:#203e31; --toast-text:#fff;
  color-scheme:light; color:var(--text); background:var(--surface);
}
:root[data-theme="dark"] {
  --background:#202425; --surface:#181c1d; --text:#edf0ed; --muted:#b3bdb8;
  --primary:#80c5b4; --primary-hover:#9bd4c5; --on-primary:#152b25;
  --border:#3a4441; --surface-soft:#272e2c; --surface-hover:#303b36;
  --green-soft:#263c33; --hero-background:#202425; --banner:#252d29;
  --focus:#a8dfca; --card-a:#303735; --card-b:#303735; --card-c:#303735; --card-d:#303735;
  --tint-a:#2e3532; --tint-b:#2e3532; --tint-c:#2e3532; --tint-d:#2e3532;
  --hero-a:#333a36; --hero-b:#333a36; --hero-c:#333a36; --hero-d:#333a36;
  --shadow:0 8px 22px #0002; --scrim:#0009; --toast:#d9f5e9; --toast-text:#15362b;
  color-scheme:dark;
}
body{color:var(--text);background:var(--surface)}
p,.breadcrumbs,.eyebrow,.hero-kicker,.hero-description,.hero-note,.hero-chips>span,.category-tile small,.tile-arrow .icon,.how-section li>span,.footer-bottom,.card-meta,.image-error,.suggestions small,.file-facts dt,.file-integrity,.carousel-hint,.collection-motion-tools p{color:var(--muted)}
.brand,.hero h1{color:var(--text)}
.brand-symbol,.primary,.fav-count,.pagination a[aria-current=page],.favorite-button[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.primary:hover{background:var(--primary-hover)}
.preview-banner{background:var(--banner);color:var(--muted)}
.preview-banner i,.hero-kicker span{background:var(--primary)}
.site-header,footer,.nav-menu,.secondary,.suggestions,.pack-card{background:var(--surface);border-color:var(--border)}
.footer-bottom,.filters-shell,.file-facts,.detail-preview{border-color:var(--border)}
/* Error text follows the independent PNG preview background, not the site theme. */
.detail-preview .image-error{color:#385047}
.detail-preview[data-background="dark"] .image-error{color:#edf4f0}
.header-search,.how-section,.pack-cover,code{background:var(--surface-soft)}
.nav-menu{box-shadow:var(--shadow)}
.nav-menu a:hover,.secondary:hover,.suggestions li[aria-selected=true],.suggestions li:hover{background:var(--surface-hover)}
.hero{background:var(--hero-background)}
.hero-chips a,.collection-chips a{background:var(--surface);color:var(--muted);border-color:var(--border)}
.hero-chips a:hover,.collection-chips a:hover{background:var(--surface-hover);color:var(--text)}
.category-tile{background:var(--tint-a);border-color:transparent}
.category-tile:hover{border-color:var(--primary)}
.category-tile.tint-1{background:var(--tint-b)}
.category-tile.tint-2{background:var(--tint-c)}
.category-tile.tint-3{background:var(--tint-d)}
.search-control{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow)}
:root[data-theme="dark"] .search-control{background:var(--surface-soft)}
.search-control>.icon,.search-control input::placeholder{color:var(--muted);opacity:1}
.search-control input{color:var(--text)}
.search-control:focus-within{outline-color:var(--focus)}
.card-visual{background:var(--card-a);border-color:var(--border)}
.resource-card:nth-child(4n+2) .card-visual{background:var(--card-b)}
.resource-card:nth-child(4n+3) .card-visual{background:var(--card-c)}
.resource-card:nth-child(4n) .card-visual{background:var(--card-d)}
.favorite-button{background:var(--surface);border-color:var(--border);color:var(--muted)}
.favorite-button[aria-pressed=true]{border-color:var(--primary)}
.demo-card-label,.demo-preview{background:var(--surface);color:var(--muted)}
.filter-fields select,.sort-control select,.pack-filters select{background:var(--surface);color:var(--text);border-color:var(--border)}
.filters-panel.open{background:var(--surface);box-shadow:0 -30px 0 100vh var(--scrim)}
.active-filters button,.detail-badges span,.empty-icon,.save-detail[aria-pressed=true]{background:var(--green-soft);color:var(--primary)}
.pagination a,.background-options button{border-color:var(--border)}
.resource-carousel{scrollbar-color:var(--border) transparent}
.toast{background:var(--toast);color:var(--toast-text)}
.skip-link{background:var(--primary);color:var(--on-primary)}
::selection{background:var(--primary);color:var(--on-primary)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--focus)}
/* The pause pill has a compact visual surface inside a full-size hit target. */
.collection-pause,.collection-pause:disabled{color:var(--text)}
.collection-pause::before{background:var(--surface);border-color:var(--border)}
.collection-pause:hover::before{background:var(--surface-hover);border-color:var(--primary)}
.collection-pause:disabled::before{background:var(--surface-soft);border-color:var(--border)}
.collection-pause:focus-visible{outline-color:var(--focus)}
/* An icon plus stable accessible toggle name; aria-pressed means dark is active. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:9px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);color:var(--text);font-size:12px;white-space:nowrap}
.theme-toggle:hover{background:var(--surface-hover)}
.theme-toggle[aria-pressed=true]{color:var(--primary);border-color:var(--border)}
.theme-toggle .icon{width:18px;height:18px}
@media(max-width:1100px){.theme-label{display:none}.header-inner{gap:24px}.site-header nav{gap:20px}}
@media(max-width:640px){.header-inner{gap:12px}.site-header nav{gap:8px}}
@media(max-width:520px){.site-header{height:112px}.header-inner{flex-wrap:wrap;gap:0;align-content:center}.header-inner>.brand{width:100%;height:49px}.site-header nav{width:100%;margin-left:0;justify-content:space-between;gap:8px;height:49px}.site-header nav>a,.explore-menu summary{min-height:44px}.nav-menu{left:50%;right:auto;transform:translateX(-50%);top:44px}}

/* Approved graphite palette: category outlines only in dark mode. */
:root[data-theme="dark"] .category-tile{border-color:#3a4441}
:root[data-theme="dark"] .category-tile:hover{border-color:var(--primary)}