/* PM3D theme contract. Keep this file last in both application layouts. */
.about-page .artifact-overlay { background: var(--theme-surface); color: var(--theme-text); }
.about-page .artifact-overlay p { color: var(--theme-text-muted); }
.about-page .artifact-kicker { color: var(--theme-link); }
:root {
  color-scheme: light;

  --theme-canvas: #fcf9f8;
  --theme-surface: #ffffff;
  --theme-surface-muted: #f9f7f2;
  --theme-surface-cool: #f6f8fb;
  --theme-field: #fbfbfc;
  --theme-text: #1b1b1b;
  --theme-text-strong: #101010;
  --theme-text-muted: #444748;
  --theme-inverse-surface: #101010;
  --theme-border: #e5e3de;
  --theme-border-soft: #f4f2ee;
  --theme-control-border: #9eabc0;
  --theme-action: #0035c6;
  --theme-hero-heading: var(--theme-action);
  --theme-action-hover: #002bb0;
  --theme-action-active: #00208a;
  --theme-action-text: #ffffff;
  --theme-link: #0035c6;
  --theme-link-hover: #002bb0;
  --theme-favorite: #c62828;
  --theme-focus: #ff5c00;
  --theme-yellow: #ffe45c;
  --theme-yellow-border: #d8b900;
  --theme-yellow-text: #111a2b;
  --theme-yellow-hover: color-mix(in srgb, var(--theme-yellow) 95%, var(--theme-yellow-text));
  --theme-yellow-active: color-mix(in srgb, var(--theme-yellow) 90%, var(--theme-yellow-text));
  /* Original hero media stays on the same light surface in either theme. */
  --theme-hero-media-surface: #fcf9f8;
  --theme-hero-media-text: #111a2b;
  --theme-hero-media-muted: #444748;
  --theme-nav-text: #444748;
  --theme-home-body-text: #111a2b;
  --theme-media-control-surface: rgba(255, 255, 255, .94);
  --theme-media-control-text: #111a2b;
  --theme-thumbnail-surface: #ebe7e4;
  --theme-thumbnail-text: #625b57;
  --theme-grid-line: rgba(229, 227, 222, .25);
  --theme-header-glass: rgba(252, 249, 248, .92);
  --theme-overlay: rgba(17, 26, 43, .5);
  --theme-shadow: rgba(27, 27, 27, .08);
  --theme-inset-highlight: rgba(255, 255, 255, .78);

  --theme-info-surface: #dde1ff;
  --theme-info-text: #001257;
  --theme-info-border: #0035c6;
  --theme-success-surface: #eaf7d5;
  --theme-success-text: #315100;
  --theme-success-border: #537c00;
  --theme-warning-surface: #fff1b8;
  --theme-warning-text: #5f4600;
  --theme-warning-border: #a83c00;
  --theme-danger-surface: #ffdad6;
  --theme-danger-text: #93000a;
  --theme-danger-border: #ba1a1a;

  /* Legacy tokens remain the public contract for existing PM3D styles. */
  --bg: var(--theme-canvas);
  --surface: var(--theme-surface);
  --surface-warm: var(--theme-surface-muted);
  --surface-soft: var(--theme-surface-muted);
  --fg: var(--theme-text);
  --fg-2: var(--theme-text-muted);
  --ink: var(--theme-inverse-surface);
  --muted: var(--theme-text-muted);
  --text-muted: var(--theme-text-muted);
  --meta: var(--theme-link);
  --border: var(--theme-border);
  --border-soft: var(--theme-border-soft);
  --accent: var(--theme-action);
  --accent-on: var(--theme-action-text);
  --accent-hover: var(--theme-action-hover);
  --accent-active: var(--theme-action-active);
  --accent-orange: var(--theme-focus);
  --danger: var(--theme-danger-border);
  --yellow: var(--theme-yellow);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-focus) 42%, transparent);
  --elev-1: 0 16px 44px var(--theme-shadow);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --theme-canvas: #111318;
  --theme-surface: #181b21;
  --theme-surface-muted: #222630;
  --theme-surface-cool: #222630;
  --theme-field: #181b21;
  --theme-text: #f5f2ed;
  --theme-text-strong: #ffffff;
  --theme-text-muted: #b7bbc4;
  --theme-inverse-surface: #222630;
  --theme-border: #3a404b;
  --theme-border-soft: #2c313b;
  --theme-control-border: #70798a;
  --theme-action: #335eea;
  --theme-hero-heading: var(--theme-yellow);
  --theme-action-hover: #4169e1;
  --theme-action-active: #335eea;
  --theme-action-text: #ffffff;
  --theme-link: #8eabff;
  --theme-link-hover: #b0c1ff;
  --theme-favorite: #ff6b6b;
  --theme-focus: #ff9a66;
  --theme-yellow: #ffe45c;
  --theme-yellow-border: #d8b900;
  --theme-yellow-text: #111a2b;
  --theme-nav-text: #111a2b;
  --theme-home-body-text: #f5f2ed;
  --theme-media-control-surface: rgba(24, 27, 33, .94);
  --theme-media-control-text: #f5f2ed;
  --theme-thumbnail-surface: #222630;
  --theme-thumbnail-text: #b7bbc4;
  --theme-grid-line: rgba(112, 121, 138, .12);
  --theme-header-glass: rgba(17, 19, 24, .92);
  --theme-overlay: rgba(0, 0, 0, .72);
  --theme-shadow: rgba(0, 0, 0, .34);
  --theme-inset-highlight: rgba(255, 255, 255, .16);

  --theme-info-surface: #1b2956;
  --theme-info-text: #d5ddff;
  --theme-info-border: #8eabff;
  --theme-success-surface: #193725;
  --theme-success-text: #b7f4c6;
  --theme-success-border: #66c985;
  --theme-warning-surface: #3a2d10;
  --theme-warning-text: #ffe08a;
  --theme-warning-border: #d5a000;
  --theme-danger-surface: #421b1c;
  --theme-danger-text: #ffb4ab;
  --theme-danger-border: #ff897d;

  --home-color-paper: #111318;
  --home-color-surface: #181b21;
  --home-color-surface-cool: #222630;
  --home-color-ink: #f5f2ed;
  --home-color-ink-soft: #b7bbc4;
  --home-color-rule: #3a404b;
  --home-color-rule-strong: #70798a;
  --home-color-accent: #8eabff;
  --home-color-accent-hover: #b0c1ff;
  --home-color-accent-ink: #ffffff;
  --home-color-signal: #ff9a66;
  --home-color-lime: #c1ff72;
  --home-color-night: #111a2b;
  --home-color-night-rule: #46536a;
  --home-color-night-muted: #d4dbea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --theme-canvas: #111318;
    --theme-surface: #181b21;
    --theme-surface-muted: #222630;
    --theme-surface-cool: #222630;
    --theme-field: #181b21;
    --theme-text: #f5f2ed;
    --theme-text-strong: #ffffff;
    --theme-text-muted: #b7bbc4;
    --theme-inverse-surface: #222630;
    --theme-border: #3a404b;
    --theme-border-soft: #2c313b;
    --theme-control-border: #70798a;
    --theme-action: #335eea;
    --theme-hero-heading: var(--theme-yellow);
    --theme-action-hover: #4169e1;
    --theme-action-active: #335eea;
    --theme-action-text: #ffffff;
    --theme-link: #8eabff;
    --theme-link-hover: #b0c1ff;
    --theme-favorite: #ff6b6b;
    --theme-focus: #ff9a66;
    --theme-nav-text: #111a2b;
    --theme-home-body-text: #f5f2ed;
    --theme-media-control-surface: rgba(24, 27, 33, .94);
    --theme-media-control-text: #f5f2ed;
    --theme-thumbnail-surface: #222630;
    --theme-thumbnail-text: #b7bbc4;
    --theme-grid-line: rgba(112, 121, 138, .12);
    --theme-header-glass: rgba(17, 19, 24, .92);
    --theme-overlay: rgba(0, 0, 0, .72);
    --theme-shadow: rgba(0, 0, 0, .34);
    --theme-inset-highlight: rgba(255, 255, 255, .16);

    --theme-info-surface: #1b2956;
    --theme-info-text: #d5ddff;
    --theme-info-border: #8eabff;
    --theme-success-surface: #193725;
    --theme-success-text: #b7f4c6;
    --theme-success-border: #66c985;
    --theme-warning-surface: #3a2d10;
    --theme-warning-text: #ffe08a;
    --theme-warning-border: #d5a000;
    --theme-danger-surface: #421b1c;
    --theme-danger-text: #ffb4ab;
    --theme-danger-border: #ff897d;

    --home-color-paper: #111318;
    --home-color-surface: #181b21;
    --home-color-surface-cool: #222630;
    --home-color-ink: #f5f2ed;
    --home-color-ink-soft: #b7bbc4;
    --home-color-rule: #3a404b;
    --home-color-rule-strong: #70798a;
    --home-color-accent: #8eabff;
    --home-color-accent-hover: #b0c1ff;
    --home-color-accent-ink: #ffffff;
    --home-color-signal: #ff9a66;
    --home-color-lime: #c1ff72;
    --home-color-night: #111a2b;
    --home-color-night-rule: #46536a;
    --home-color-night-muted: #d4dbea;
  }
}

html,
body {
  background-color: var(--theme-canvas);
  color: var(--theme-text);
}

body {
  background-image:
    linear-gradient(to right, var(--theme-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--theme-grid-line) 1px, transparent 1px);
}

.topbar {
  background: var(--theme-header-glass);
}

.nav-link {
  color: var(--theme-nav-text);
}

.home-hero-copy h1 {
  color: var(--theme-home-body-text);
}

.home-hero-gallery-caption,
.home-hero-gallery-arrow {
  background: var(--theme-media-control-surface);
  color: var(--theme-media-control-text);
}

.product-showcase {
  background: color-mix(in srgb, var(--theme-canvas) 94%, transparent);
}

.product-breadcrumbs li:not(:last-child)::after,
.product-showcase-fallback {
  color: var(--theme-text-muted);
}

/* Theme control */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--theme-control-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--theme-surface);
  color: var(--theme-text);
  cursor: pointer;
  font: 700 11px/1.2 var(--font-mono, monospace);
}

.theme-toggle[hidden] {
  display: none !important;
}

.theme-toggle:hover {
  border-color: var(--theme-link);
  color: var(--theme-link);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}

.theme-toggle__icon {
  display: block;
  width: 20px;
  height: 20px;
}

.theme-toggle__icon--moon,
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun {
  display: none;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon {
  display: block;
}

.theme-toggle--icon {
  display: grid;
  width: 44px;
  padding: 0;
  place-items: center;
}

.theme-toggle--nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-transform: uppercase;
}

.theme-nav-mobile {
  display: none;
}

.admin-sidebar .theme-toggle--nav {
  width: 100%;
  justify-content: flex-start;
  margin-top: auto;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  letter-spacing: .06em;
}

.admin-sidebar .theme-toggle--nav:hover {
  border-color: var(--border);
  background: var(--surface-warm);
  color: var(--fg);
}

/* Ordinary surfaces and fields. Fixed artwork and inverse sections are untouched. */
.commerce-principle-panel,
.commerce-empty-state,
.auth-card,
.summary-panel,
.catalog-filter-chip,
.catalog-no-results,
.commerce-line-item,
.cart-item-issue,
.checkout-section,
.order-section,
.account-order-card,
.account-summary-block,
.account-settings-section,
.account-address-book,
.account-progress-marker,
.cart-mobile-checkout,
.collections-page .product-card,
.product-related-section,
.admin-sidebar,
.admin-metric,
.admin-panel,
.admin-thumbnail-overflow,
.admin-table-wrap,
.admin-form {
  background: var(--theme-surface);
}

.collections-page .product-card,
.collections-page .product-media,
.collections-page .product-footer {
  border-color: var(--theme-border);
}

.collections-page .product-media,
.product-next-step {
  background: var(--theme-surface-muted);
}

.collections-page .product-source-note {
  color: var(--theme-text-muted);
}

.product-page .product-card:hover {
  border-color: var(--theme-control-border);
}

.product-review-note {
  border-color: var(--theme-info-border);
  background: var(--theme-info-surface);
}

.product-review-note strong,
.product-review-note p {
  color: var(--theme-info-text);
}

.admin-body {
  background: var(--theme-canvas);
}

.admin-product-thumbnail {
  background: var(--theme-thumbnail-surface);
  color: var(--theme-thumbnail-text);
}

.artifact-screen,
.catalog-search-field input,
.catalog-sort-field select,
.account-fixed-field,
.helpbot-option:hover,
.helpbot-restart:hover,
.checkout-address-option:hover,
.checkout-address-option:has(input:checked),
.quote-page .upload-zone,
.quote-page .upload-zone.is-disabled:hover {
  background: var(--theme-surface-muted);
}

.quote-page .form-input,
.quote-page .form-select,
.quote-page .form-textarea {
  border-color: var(--theme-control-border);
  background: var(--theme-field);
}

.form-input,
.form-select,
.form-textarea,
.quantity-input,
.catalog-search-field input,
.catalog-sort-field select,
.admin-inline-form .form-input {
  border-color: var(--theme-control-border);
  background-color: var(--theme-field);
  color: var(--theme-text);
}

.form-input::placeholder,
.form-textarea::placeholder,
.catalog-search-field input::placeholder,
.quote-page .form-textarea::placeholder {
  color: var(--theme-text-muted);
  opacity: 1;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-input[readonly],
.form-textarea[readonly] {
  border-color: var(--theme-border);
  background: var(--theme-surface-muted);
  color: var(--theme-text-muted);
  opacity: 1;
}

.form-input:-webkit-autofill,
.form-select:-webkit-autofill,
.form-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--theme-text);
  box-shadow: 0 0 0 1000px var(--theme-field) inset;
  caret-color: var(--theme-text);
}

/* Text links use a brighter role than filled actions in dark mode. */
.footer-link:hover,
.product-secondary-collections a,
.catalog-clear-link,
.auth-links a,
.text-action,
.account-tabs a:hover,
.account-tabs a.is-active,
.checkout-address-option em,
.admin-text-link,
.admin-record-list a,
.admin-table a,
.admin-disclosure summary,
.helpbot-restart,
.product-quote-note a,
.collection-text-link,
.home-hero-secondary-link {
  color: var(--theme-link);
}

.product-secondary-collections a:active,
.catalog-clear-link:hover,
.auth-links a:hover,
.text-action:hover,
.admin-text-link:hover,
.admin-record-list a:hover,
.admin-table a:hover {
  color: var(--theme-link-hover);
}

.home-hero-secondary-link:hover {
  color: var(--theme-link-hover);
}

/* Status roles keep foreground, surface, and border coupled. */
.flash-message,
.admin-flash,
.account-status-progress {
  border-color: var(--theme-info-border);
  background: var(--theme-info-surface);
  color: var(--theme-info-text);
}

.flash-message.alert,
.admin-flash.alert,
.form-errors,
.payment-error,
.account-status-issue,
.admin-product-thumbnail--missing,
.admin-result--inactive,
.admin-result--no_eligible_products,
.admin-result--outside_first_four {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger-surface);
  color: var(--theme-danger-text);
}

.local-catalog-notice,
.view-alert-banner,
.account-status-attention,
.admin-product-thumbnail--invalid,
.admin-result--using_cover_fallback {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning-surface);
  color: var(--theme-warning-text);
}

.local-catalog-notice strong {
  color: inherit;
}

.payment-truth-card.success,
.account-status-success,
.admin-result--visible {
  border-color: var(--theme-success-border);
  background: var(--theme-success-surface);
  color: var(--theme-success-text);
}

.text-button.danger,
.admin-danger-button {
  color: var(--theme-danger-text);
}

.cart-page {
  --cart-attention-bg: var(--theme-warning-surface);
  --cart-attention-fg: var(--theme-warning-text);
  --cart-issue-bg: var(--theme-danger-surface);
  --cart-issue-border: var(--theme-danger-border);
}

.account-page {
  --account-success-bg: var(--theme-success-surface);
  --account-success-fg: var(--theme-success-text);
  --account-attention-bg: var(--theme-warning-surface);
  --account-attention-fg: var(--theme-warning-text);
  --account-issue-bg: var(--theme-danger-surface);
  --account-issue-fg: var(--theme-danger-text);
}

.cart-item-issue {
  color: var(--theme-danger-text);
}

.catalog-discovery.is-enhanced .catalog-filter-panel {
  box-shadow: 18px 0 42px var(--theme-shadow);
}

.cart-mobile-checkout,
.summary-panel,
.artifact-frame,
.helpbot-panel {
  box-shadow: 0 14px 34px var(--theme-shadow);
}

.admin-thumbnail-stack .admin-product-thumbnail {
  box-shadow: 0 0 0 2px var(--theme-surface);
}

@media (max-width: 760px) {
  .nav-actions > .theme-toggle--icon {
    display: none;
  }

  .theme-nav-mobile {
    display: list-item;
  }

  .theme-nav-mobile .theme-toggle--nav {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
    color: var(--theme-yellow-text);
  }

  .theme-nav-mobile .theme-toggle--nav:hover {
    border-color: color-mix(in srgb, var(--theme-yellow-text) 30%, transparent);
    background: rgba(255, 255, 255, .35);
    color: var(--theme-yellow-text);
  }

  .admin-sidebar .theme-toggle--nav {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    scroll-behavior: auto;
  }
}

/* Hero heading follows the approved brand colour in each theme. */
#home-hero-title { color: var(--theme-hero-heading); }