/*
 * WTDS Global Appearance · T5 semantic-first cleanup
 *
 * T4 used this late layer to certify Dark/System while feature CSS still
 * consumed physical compat paint. T5 removed that paint debt, so feature
 * surfaces now follow WTDS semantic tokens directly. This file only owns
 * the appearance controls, document canvas fallback and responsive touch
 * behavior. It must not repaint feature modules.
 */

/* Real storefront appearance controls. */
.wapu-footer-official__appearance {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--wtds-comfort-section);
  padding-top: var(--wtds-comfort-gap-md);
  border-top: var(--wtds-border-hairline) solid var(--wtds-outline-soft);
}
.wapu-footer-official__appearance .wapu-theme-mode__label { color: currentColor; opacity: .72; }
.wapu-footer-official__appearance .wapu-theme-mode__options { background: color-mix(in oklch, currentColor 10%, transparent); }
.wapu-footer-official__appearance .wapu-theme-mode__option { color: currentColor; }
.wapu-footer-official__appearance .wapu-theme-mode__option[aria-checked="true"] {
  background: color-mix(in oklch, currentColor 16%, transparent);
  color: currentColor;
  box-shadow: none;
}
.wapu-account-logged__appearance {
  padding: var(--wtds-comfort-gap-sm) var(--wtds-comfort-gap-md);
  border-bottom: var(--wtds-border-hairline) solid var(--wtds-outline-soft);
}
.wapu-account-logged__appearance .wapu-theme-mode { width: 100%; justify-content: space-between; }

/* Global canvas fallback. Feature paint is owned by each feature stylesheet. */
.wapu-dark body,
.wapu-dark .site,
.wapu-dark .site-content,
.wapu-dark #page,
.wapu-dark #primary,
.wapu-dark main {
  background-color: var(--wtds-surface);
  color: var(--wtds-on-surface);
}
.wapu-dark a { color: inherit; }
.wapu-dark ::selection { background: var(--wtds-primary-soft); color: var(--wtds-on-surface); }

/* Responsive/touch behavior for the appearance control only. */
@media (max-width: 900px) {
  .wapu-footer-official__appearance { justify-content: flex-start; }
  .wapu-account-logged__appearance .wapu-theme-mode { gap: var(--wtds-comfort-gap-sm); }
}
@media (max-width: 600px) {
  .wapu-footer-official__appearance .wapu-theme-mode { width: 100%; justify-content: space-between; }
  .wapu-theme-mode__option { min-width: 44px; min-height: 44px; }
}
@media (pointer: coarse) {
  .wapu-theme-mode__option { min-width: var(--wtds-touch-target); min-height: var(--wtds-touch-target); }
}