/* Final component palette for all six themes. Load after theme-presets.
   Layout and image pixels stay unchanged; only UI paint is centralized here. */
body[data-theme-preset] {
  --ui-surface: var(--mat-surface);
  --ui-surface-raised: var(--mat-paper);
  --ui-field: var(--mat-field);
  --ui-copy: var(--mat-copy);
  --ui-muted: var(--mat-muted);
  --ui-faint: var(--mat-muted);
  --ui-border: var(--mat-line);
  --ui-border-soft: var(--mat-line-soft);
  --ui-tint: var(--mat-accent-soft);
  --ui-tint-copy: var(--mat-accent);
  --ui-focus: var(--mat-accent);
  --mat-cta-hover-shadow: var(--mat-cta-shadow);
  --control-hover: var(--mat-accent-soft);
  --ui-checker-a: var(--preset-checker-a);
  --ui-checker-b: var(--preset-checker-b);
}
body[data-theme-preset='cream'] {
  color-scheme: light;
  --ui-link: #a53f59; --ui-link-hover: #7b2840;
  --ui-tag: #f8e9e2; --ui-tag-copy: var(--mat-muted);
  --ui-success: #25744e; --ui-warning: #90520d; --danger: #aa3459;
  --preset-checker-a: #eae2d9; --preset-checker-b: #faf6f0;
}
body[data-theme-preset='sakura'] { color-scheme: light; --preset-checker-a: #ece0e6; --preset-checker-b: #fcf4f8; }
body[data-theme-preset='matcha'] { color-scheme: light; --preset-checker-a: #e1e8df; --preset-checker-b: #f4f8f1; }
body[data-theme-preset='mist'] { color-scheme: light; --preset-checker-a: #dfe7ec; --preset-checker-b: #f3f8fb; }
body[data-theme-preset='berry'] { color-scheme: dark; --preset-checker-a: #3c373b; --preset-checker-b: #302c30; }
body[data-theme-preset='cocoa'] { color-scheme: dark; --preset-checker-a: #3a342f; --preset-checker-b: #2d2926; }

/* Explicit containers beat legacy body.theme-light form rules. */
body[data-theme-preset] .filters .field select,
body[data-theme-preset] .admin-panel .quick-open-row input,
body[data-theme-preset] .admin-panel .selection-tools select,
body[data-theme-preset] .admin-panel input[type='number'] {
  color: var(--mat-copy); background: var(--mat-field); border-color: var(--mat-line);
}
body[data-theme-preset] .field :is(input,select):hover,
body[data-theme-preset] .admin-panel .quick-open-row input:hover { border-color: var(--mat-muted); }
body[data-theme-preset] .filters .field select:focus,
body[data-theme-preset] .admin-panel .quick-open-row input:focus,
body[data-theme-preset] .admin-panel :is(select,input[type='number']):focus {
  border-color: var(--mat-accent); outline-color: var(--ui-focus); box-shadow: var(--mat-focus-shadow);
}
body[data-theme-preset] .field select option { color: var(--mat-copy); background: var(--mat-field); }
body[data-theme-preset] .search-shell .searchbar input { background: transparent; color: var(--mat-copy); }
body[data-theme-preset] .search-shell .searchbar input::placeholder { color: var(--mat-muted); }
body[data-theme-preset] .search-shell .ghost { color: var(--mat-copy); background: var(--mat-paper); border-color: var(--mat-line); }
body[data-theme-preset] .search-shell .ghost:hover { color: var(--mat-accent); background: var(--mat-accent-soft); border-color: var(--mat-accent); }
body[data-theme-preset] :is(.sub,.meta,.translation-hint,.foot,.filter-note) { color: var(--mat-muted); }
body[data-theme-preset] :is(.asset-actions,.project-links) a { color: var(--ui-link); }
body[data-theme-preset] :is(.asset-actions,.project-links) a:hover { color: var(--ui-link-hover); }
body[data-theme-preset] .project-card { background: var(--mat-paper); color: var(--mat-copy); border-color: var(--mat-line-soft); }
body[data-theme-preset] .project-card span { color: var(--mat-muted); }
body[data-theme-preset] .project-card .project-links a { background: var(--mat-field); border-color: var(--mat-line); }
body[data-theme-preset] .chip-removable { background: var(--mat-accent-soft); color: var(--mat-accent); border-color: var(--mat-line-soft); }
body[data-theme-preset] .inventory-tags .tag { background: var(--mat-accent-soft); border-color: var(--mat-line-soft); }
body[data-theme-preset] .inventory-tags .inventory-registered { color: var(--ui-success); }
body[data-theme-preset] .inventory-tags .inventory-unregistered { color: var(--ui-warning); }
body[data-theme-preset] .inventory-tags .inventory-duplicate { color: var(--ui-link); }
body[data-theme-preset] :is(input[type='checkbox'],input[type='radio'],input[type='range']) { accent-color: var(--mat-accent); }

/* One quiet toolbar surface, one accent state. Navigation remains transparent.
   Do not mix #adminToggle into a :is() list: that raises every item's specificity. */
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > :is(button,a),
body[data-theme-preset].cat-project-page .project-actions > :is(button,a) {
  min-height: 34px; padding: 6px 11px; border-radius: 10px; font-size: 12px;
  color: var(--mat-copy); background: var(--mat-paper); border: 1px solid var(--mat-line);
  box-shadow: inset 0 1px 0 var(--mat-shine),0 1px 2px #00000008;
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .ghost,
body[data-theme-preset].cat-project-page .project-actions > .ghost {
  color: var(--mat-copy); background: var(--mat-paper); border-color: var(--mat-line);
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > :is(button,a):hover:not(:disabled),
body[data-theme-preset].cat-project-page .project-actions > :is(button,a):hover:not(:disabled) {
  color: var(--mat-accent); background: var(--control-hover); border-color: var(--mat-accent);
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > :is(button,a):focus-visible,
body[data-theme-preset].cat-project-page .project-actions > :is(button,a):focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 3px;
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > :is(button,a):active:not(:disabled),
body[data-theme-preset].cat-project-page .project-actions > :is(button,a):active:not(:disabled) {
  color: var(--mat-accent); background: var(--control-hover); box-shadow: inset 0 2px 4px #00000014;
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .image-management,
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > [aria-expanded='true'],
body[data-theme-preset].cat-project-page .project-actions > [aria-expanded='true'],
body[data-theme-preset] #adminToggle.active {
  color: var(--mat-accent); background: var(--mat-accent-soft); border-color: var(--mat-line);
}
body[data-theme-preset] #adminToggle.active:hover:not(:disabled) { border-color: var(--mat-accent); }
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > :is(button,a):disabled,
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .busy,
body[data-theme-preset].cat-project-page .project-actions > :is(button,a):disabled {
  color: var(--mat-muted); background: var(--mat-field); border-color: var(--mat-line-soft);
  box-shadow: none; opacity: .65;
}
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .theme-toggle { border-color: var(--mat-line) !important; }
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .theme-toggle:is(:hover,:focus-visible,[aria-expanded='true']) { border-color: var(--mat-accent) !important; }
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .theme-toggle:disabled { border-color: var(--mat-line-soft) !important; }
body[data-theme-preset] .hero:is(.cat-hero,.cat-tool-hero) .hero-actions > .badge { color: var(--mat-muted); background: var(--mat-accent-soft); border-color: var(--mat-line-soft); }

/* Each theme has a restrained checker tint. These paint only CSS surfaces.
   The user's inline solid viewer background must continue to win. */
body[data-theme-preset] .thumb,
body[data-theme-preset] .admin-panel .canvas-wrap,
body[data-theme-preset] #imageViewer .viewer-stage,
body[data-theme-preset].cat-page.cat-tool-page :is(.sprite-preview,.anim-box,.sprite-cell img,.queue-item img,.result-card img),
body[data-theme-preset].cat-project-page :is(.card img,.card .empty) {
  background: repeating-conic-gradient(var(--ui-checker-a) 0 25%,var(--ui-checker-b) 0 50%) 50% / 20px 20px;
  border-color: var(--mat-line-soft);
}
body[data-theme-preset] #imageViewer .bg-checker { background: repeating-conic-gradient(var(--ui-checker-a) 0 25%,var(--ui-checker-b) 0 50%) 50% / 6px 6px; }

/* The editor's controls inherit the same surface as cards and filter fields. */
body[data-theme-preset] .admin-panel :is(.admin-controls,.preview-card,.admin-metrics) {
  color: var(--mat-muted); background: var(--mat-paper); border-color: var(--mat-line-soft);
}
body[data-theme-preset] .admin-panel :is(.dropzone,.quick-open) {
  color: var(--mat-accent); background: var(--mat-accent-soft); border-color: var(--mat-line);
}
body[data-theme-preset] .admin-panel .dropzone:hover { border-color: var(--mat-accent); }
body[data-theme-preset] .admin-panel :is(.quick-open-row,.selection-tools) button {
  color: var(--mat-accent); background: var(--mat-accent-soft); border-color: var(--mat-line);
}
body[data-theme-preset] .admin-panel :is(.quick-open-row,.selection-tools) button:hover:not(:disabled) { border-color: var(--mat-accent); }
body[data-theme-preset] .admin-panel .admin-head p { color: var(--mat-muted); }
body[data-theme-preset] .admin-panel .preview-card figcaption { color: var(--mat-copy); border-color: var(--mat-line-soft); }
body[data-theme-preset] .admin-panel .admin-controls input[type='range'] { accent-color: var(--mat-accent); }

/* Common tool states also work for cream, which has no preset adapter. */
body[data-theme-preset].cat-page.cat-tool-page .progress { background: var(--mat-accent-soft); border-color: var(--mat-line-soft); }
body[data-theme-preset].cat-page.cat-tool-page .progress i { background: linear-gradient(90deg,var(--cat-violet),var(--mat-accent)); }
body[data-theme-preset].cat-page.cat-tool-page :is(.field,.result-toolbar) :is(input,select):hover { border-color: var(--mat-muted); }
body[data-theme-preset].cat-page.cat-tool-page :is(.field,.result-toolbar) :is(input,select):focus {
  border-color: var(--mat-accent); outline-color: var(--ui-focus); box-shadow: var(--mat-focus-shadow);
}
body[data-theme-preset].cat-page.cat-tool-page .green:hover:not(:disabled) { color: var(--mat-accent); background: var(--mat-accent-soft); border-color: var(--mat-accent); }