/* White surfaces keep the product photographs and selected options in focus. */
:root {
  --paper: #fff;
  --white: #fff;
  --ink: #252525;
  --muted: #737373;
  --line: #e5e5e5;
  --accent-soft: #f7f7f7;
}

html,
body,
.site-header,
.site-footer,
.initial-loading {
  background: #fff;
}

.utility-bar {
  background: #fff;
  color: #555;
  border-bottom: 1px solid var(--line);
}

.utility-bar .sync-indicator { color: #6b6b6b; }
.utility-bar .sync-indicator.offline { color: #a15b30; }
.brand-type > span,
.main-nav > a,
.admin-entry { color: #686868; }
.brand-mark { background: #292d29; }

.hero-photo,
.hero-photo img,
.hero-edition,
.card-image-wrap,
.card-image,
.card-image img,
.main-product-image,
.gallery-thumbnails > button,
.gallery-key-attributes,
.reference-image-card,
.reference-image-card > button,
.reference-image-card > button > span,
.color-option,
.size-chip,
.condition-chip,
.detail-section-nav > button,
.detail-internal-note,
.source-group,
.source-table th,
.source-table td,
.detail-data-table,
.detail-data-table thead th,
.detail-data-table tbody th,
.price-matrix-table th,
.price-matrix-table tbody th,
.matrix-price-cell,
.size-price-list,
.size-price-head,
.quote-conditions,
.quote-tier-label > select,
.selected-spec-summary,
.selected-spec-summary.has-quote,
.tier-card,
.tier-card.regular,
.detail-empty-note,
.restricted-information,
.bulletin-card,
.bulletin-detail,
.bulletin-welcome,
.linked-products > a,
.announcement-dialog,
.notice-product-link,
.clothing-attribute-group,
.clothing-attribute-heading,
.shein-attributes-table th,
.shein-attributes-table td {
  background: #fff;
}

/* Keep the original image pixels; do not tint them with the page surface. */
.hero-photo img,
.card-image img,
.main-product-image img,
.gallery-thumbnails > button img {
  mix-blend-mode: normal;
}

.image-placeholder,
.color-mapping-row > .image-placeholder {
  background: #fafafa;
  color: #929292;
}

.main-product-image,
.gallery-key-attributes,
.reference-image-card,
.color-option,
.size-chip,
.condition-chip,
.detail-section-nav > button,
.size-price-list,
.quote-conditions,
.quote-tier-label > select,
.tier-card,
.tier-card.regular,
.clothing-attribute-group,
.clothing-attribute-heading,
.shein-attributes-table th,
.shein-attributes-table td {
  border-color: var(--line);
}

.product-description,
.gallery-key-attributes dt,
.gallery-attributes-heading h2,
.detail-price,
.size-row-price,
.source-table td,
.detail-data-table td,
.attribute-grid dd,
.gallery-key-attributes dd,
.detail-list,
.color-option,
.size-chip,
.condition-chip,
.detail-section-nav > button,
.price-matrix-table th,
.price-matrix-table tbody th,
.size-price-head,
.size-price-row,
.clothing-attribute-heading h4,
.shein-attributes-table th,
.shein-attributes-table td,
.clothing-attributes .shein-attributes-table th,
.clothing-attributes .shein-attributes-table td,
.clothing-attributes .standard-attribute-grid textarea,
.bulletin-body,
.bulletin-card p,
.bulletin-welcome h2,
.linked-products strong {
  color: #3d3d3d;
}

.gallery-caption,
.style-code,
.style-code strong,
.spec-heading span,
.price-label,
.size-row-price > small,
.size-price-note,
.section-description,
.product-update,
.information-heading p,
.source-location,
.detail-data-table td.attribute-source,
.standard-attribute-note,
.clothing-attributes .standard-attribute-note,
.clothing-attribute-heading > span,
.clothing-attribute-help,
.attribute-english-label,
.clothing-attributes .standard-attribute-grid .attribute-english-label,
.clothing-attributes .shein-attributes-table th small,
.card-code,
.card-colors,
.card-price small,
.hero-copy > p,
.hero-stats,
.hero-stats strong,
.hero-stats-label,
.breadcrumbs,
.breadcrumbs > span,
.bulletin-welcome p,
.bulletin-detail-meta,
.site-footer p,
.footer-note { color: #737373; }

.icon-button:hover,
.category-list > button:hover,
.color-option:hover,
.size-price-row:hover,
.matrix-price-cell:hover,
.detail-section-nav > button:hover,
.detail-section-nav > button:focus-visible,
.admin-table tbody tr:hover,
.access-policy-table tbody tr:hover {
  background: #f7f7f7;
}

.category-list > button.active,
.color-option.active,
.size-chip.active,
.size-option.active,
.condition-chip.active,
.gallery-thumbnails > button.active,
.size-price-row.active,
.matrix-price-cell.active,
.bulletin-card.selected,
.admin-nav > button.active,
.admin-page .admin-nav > button.active {
  background: #f2f6ef;
  border-color: #6f8a5e;
  color: #36542b;
}

.button.secondary { background: #fff; color: #525b4e; border-color: #d9ded6; }
.button.secondary:hover { background: #f3f6f0; border-color: #a2b096; }

/* Editor surfaces share the same neutral background as the public catalog. */
.admin-login,
.login-story,
.login-lock,
.form-section,
.table-scroll,
.admin-table th,
.table-product > img,
.table-product > .image-placeholder,
.upload-box,
.editor-image-preview,
.url-image-add > input,
.editor-save-card,
.admin-page .editor-save-card,
.admin-announcement,
.history-card,
.history-before,
.history-after,
.mobile-save,
.color-mapping-row > select,
.quote-tier-editor,
.quote-rule-editor,
.structured-edit-row,
.compact-price-editor,
.compact-price-table thead th,
.compact-price-preview,
.ownership-panel,
.governance-form,
.task-card,
.task-stats > span,
.workflow-banner,
.diff-columns pre,
.tool-card,
.tool-file-label,
.tool-help > pre,
.tool-review,
.tool-code-tag,
.tool-copy-dialog,
.access-policy-note,
.access-policy-table thead th {
  background: #fff;
  border-color: var(--line);
}

.login-story:after { color: #f3f3f3; }
.login-story h1,
.login-story p,
.login-story-bottom,
.login-form-wrap > p,
.form-field,
.form-field input,
.form-field textarea,
.form-field select,
.admin-page .form-field,
.admin-page .form-field input,
.admin-page .form-field textarea,
.admin-page .form-field select,
.admin-page .attribute-edit-row input,
.admin-page .attribute-edit-row textarea,
.admin-page .list-edit-row textarea,
.admin-page .admin-section-heading h2,
.admin-page .admin-section-heading p,
.admin-page .form-section-title h3,
.admin-page .editor-save-card h3,
.admin-page .table-product strong,
.admin-page .admin-table th,
.admin-page .admin-table td,
.admin-page .admin-nav > button,
.admin-page .admin-announcement h3,
.tool-heading h2,
.tool-card h3,
.tool-table,
.tool-table strong,
.tool-product-choice > span,
.tool-product-choice strong,
.tool-copy-dialog h2,
.tool-copy-dialog textarea,
.access-policy-note,
.access-policy-note strong,
.access-policy-table thead th {
  color: #454545;
}

.field-hint,
.admin-page .field-hint,
.admin-page .form-section-title > span,
.admin-page .source-readonly,
.admin-page .source-location,
.admin-page .pricing-note,
.admin-page .editor-save-card p,
.admin-page .dirty-status,
.admin-page .table-product small,
.admin-page .table-caption,
.admin-page .table-caption > span,
.admin-page .pagination > span,
.tool-heading > p,
.tool-note,
.tool-search,
.tool-help,
.tool-backup-item p,
.tool-backup-item small,
.tool-readable-value {
  color: #737373;
}

.form-field input,
.form-field textarea,
.form-field select,
.editor-image-fields > input,
.attribute-edit-row input,
.attribute-edit-row textarea,
.list-edit-row textarea,
.clothing-attributes .standard-attribute-grid textarea {
  background: #fff;
  border-color: #dcdcdc;
}

.form-field input[readonly],
.form-field > input[readonly],
.form-field > select:disabled,
.standard-attribute-grid textarea[readonly],
.clothing-attributes .standard-attribute-grid textarea[readonly] {
  background: #f6f6f6;
  color: #737373 !important;
  border-color: #e2e2e2;
}

/* Publication warnings, draft notices, and selected states retain their cues. */
.selected-packaging-row td,
.selected-packaging-row th { background: #f2f6ef !important; }
.version-current-row { background: #f5f8f3; }