/* MISOMOCHI scents — four-color luxury palette from the approved reference.
   Eclipse Noir / Espresso Suede / Gilded Caramel / Ivory Lace.
   All interface tints and shadows derive from these four colors only. */
:root {
  color-scheme: dark;
  --noir: #151311;
  --espresso: #635549;
  --caramel: #a9855f;
  --ivory: #dad6cd;
  --noir-rgb: 21 19 17;
  --espresso-rgb: 99 85 73;
  --caramel-rgb: 169 133 95;
  --ivory-rgb: 218 214 205;
  --bg: var(--noir);
  --ink: var(--ivory);
  --muted: rgb(var(--ivory-rgb) / .76);
  --prose: rgb(var(--ivory-rgb) / .9);
  --accent: var(--caramel);
  --line: rgb(var(--caramel-rgb) / .29);
  --panel: rgb(var(--espresso-rgb) / .18);
  --hover: rgb(var(--caramel-rgb) / .15);
  --red: var(--caramel);
  --glass-espresso: rgb(var(--espresso-rgb) / .22);
  --glass-caramel: rgb(var(--caramel-rgb) / .12);
  --glass-ivory: rgb(var(--ivory-rgb) / .045);
}
html, body { background: var(--noir); color: var(--ivory); }
body { accent-color: var(--caramel); }
::selection { background: var(--caramel); color: var(--noir); }
a:hover { color: var(--ivory); }
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--caramel); outline-offset: 4px;
}
:is(.header, .topbar) {
  background: rgb(var(--noir-rgb) / .84);
  border-color: var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
:is(.topbar nav a, .nav-ingredients, .scent-name, .extra-notes, .note-editor label,
.combo-field label, .more-tools summary, .more-tools label, .version-label,
.ingredient-form-grid label, .history-row small, .small-link, .loading) { color: var(--muted); }
:is(.eyebrow, .badge, .cabinet-sections a span) { color: var(--caramel); }
:is(.cabinet-sections, .catalog-toolbar) {
  background: var(--glass-espresso); border: 1px solid var(--line);
  padding-inline: 16px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
:is(.ad-visual, .bottle-wrap, .product-banner img, .ingredient-picture-preview) { background: var(--noir); border-color: var(--line); }
:is(.ad-copy, .portal-caption) {
  background: linear-gradient(var(--glass-espresso), var(--glass-espresso)), rgb(var(--noir-rgb) / .88);
  color: var(--ivory); border-color: var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.ad-folio > span { background: rgb(var(--noir-rgb) / .86); color: var(--ivory); border-color: var(--line); }
.ad-link { color: var(--ivory); border-color: var(--caramel); }
.ad-status { color: var(--muted); }
:is(.ad-visual, .ad-link):hover { border-color: var(--caramel); }
:is(.cabinet-entrance, .perfume-card, .note-editor, .note-pick, .product-banner) {
  background: var(--glass-espresso); border-color: var(--line);
  box-shadow: inset 0 1px 0 rgb(var(--ivory-rgb) / .04);
}
:is(.perfume-card, .note-pick):hover {
  background: rgb(var(--espresso-rgb) / .32); border-color: rgb(var(--caramel-rgb) / .7);
}
:is(.card-body, .note-edit-body) { background: var(--glass-ivory); }
:is(.scent-preview .sp-picture, .ingredient-picture-preview) { border-color: var(--line); }
button, .button { background: var(--glass-espresso); color: var(--ivory); border-color: var(--line); }
button:hover, .button:hover { background: var(--hover); color: var(--ivory); border-color: var(--caramel); }
:is(.work-brand, .nav-gallery, .nav-ingredients, .back-button, .icon-button, .stash-button,
.stash-head > button, .stash-row button, .zoom-button, .gallery-thumbs button) { background: transparent; }
.work-brand:hover { background: transparent; }
.nav-gallery[aria-current] { background: var(--glass-caramel); border-color: var(--line); color: var(--ivory); }
:is(input, textarea, select, .search-label input, .gallery-toolbar select) {
  background: rgb(var(--espresso-rgb) / .12); color: var(--ivory); border-color: rgb(var(--caramel-rgb) / .38);
  caret-color: var(--caramel);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
option, optgroup { background: var(--noir); color: var(--ivory); }
:is(.picture-change, .add-note, .subtle-button) { background: var(--glass-caramel); color: var(--ivory); border-color: var(--line); }
.publish-panel { background: var(--glass-caramel); border-color: rgb(var(--caramel-rgb) / .42); }
:is(.status, .status.unsaved) { color: var(--ivory); }
.status::before { background: var(--ivory); }
.status.unsaved::before { background: var(--caramel); }
.primary, .primary:hover {
  background: var(--glass-caramel); color: var(--ivory);
  border-color: var(--caramel); box-shadow: inset 0 1px 0 rgb(var(--ivory-rgb) / .08);
}
.primary:hover { background: rgb(var(--caramel-rgb) / .24); }
:is(.more-tools, .history-row, .picture-change) { border-color: var(--line); }
:is(.draft-badge, .open-card) { background: rgb(var(--noir-rgb) / .88); color: var(--ivory); border-color: var(--line); }
:is(.error-box, .form-error, .sp-error) { color: var(--ivory); border-color: var(--caramel); }
.error-box { background: var(--glass-caramel); }
.ingredient-form-grid input[type=file]::file-selector-button {
  background: var(--glass-caramel); color: var(--ivory); border-color: var(--line);
}
dialog, .preview-dialog, .zoom-dialog {
  background: linear-gradient(var(--glass-espresso), var(--glass-espresso)), rgb(var(--noir-rgb) / .93);
  color: var(--ivory); border-color: rgb(var(--caramel-rgb) / .42);
  box-shadow: 0 24px 80px rgb(var(--noir-rgb) / .55);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
dialog::backdrop {
  background: rgb(var(--noir-rgb) / .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:is(.toast, .zoom-dialog > button, .zoom-button > span) {
  background: rgb(var(--noir-rgb) / .9); color: var(--ivory); border: 1px solid var(--line);
  box-shadow: 0 8px 35px rgb(var(--noir-rgb) / .5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.skip:focus { background: var(--ivory); color: var(--noir); }
.scent-profile {
  --scent-accent: var(--caramel) !important;
  color: var(--ivory); border-color: var(--line);
}
.scent-profile .sp-family, .sp-note p, .sp-foot, .sp-state { color: var(--muted); }
.sp-note { background: var(--glass-espresso); border-color: var(--line); }
.sp-note-copy { background: var(--glass-ivory); }
.sp-picture { background-color: var(--noir); }
.sp-picture::after { box-shadow: inset 0 -20px 30px rgb(var(--noir-rgb) / .26); }
.sp-together { border-color: var(--line); background: var(--glass-caramel); padding: 24px; border-radius: 5px; }
.sp-together p { color: var(--ivory); }
@media (max-width: 580px) { .sp-together { padding: 18px; } }