:root {
  color-scheme: light;
  --ui-black: #111111;
  --ui-white: #ffffff;
  --ui-gray: #f2f2f2;
  --ui-text: var(--ui-black);
  --ui-text-secondary: rgba(17, 17, 17, 0.60);
  --ui-text-disabled: rgba(17, 17, 17, 0.35);
  --ui-border: rgba(17, 17, 17, 0.12);
  --ui-border-strong: rgba(17, 17, 17, 0.22);
  --ui-hover: var(--ui-gray);
  --ui-selected: var(--ui-gray);
  --ui-page-bg: var(--ui-white);
  --ui-overlay: rgba(17, 17, 17, 0.86);

  --bg: var(--ui-page-bg);
  --panel: var(--ui-white);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-text-secondary);
  --brand: var(--ui-black);
  --brand-weak: var(--ui-gray);
  --accent: var(--ui-black);
  --warn: var(--ui-black);
  --shadow: none;
}

html,
body,
#app {
  min-height: 100%;
  background: var(--ui-page-bg);
  color: var(--ui-text);
}

body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  font-weight: 400;
}

::selection {
  background: var(--ui-black);
  color: var(--ui-white);
}

button,
input,
select,
textarea {
  border-color: var(--ui-border);
  box-shadow: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ui-black);
  outline-offset: 2px;
}

.app-shell,
.page {
  background: var(--ui-page-bg);
}

.topbar,
.bottom-nav,
.checkout-bar {
  border-color: var(--ui-border);
  background: var(--ui-white);
}

.topbar h1,
.section-title h2,
.product-title,
.product-card h3,
.list-card h3,
.form-card h2 {
  color: var(--ui-text);
  font-weight: 600;
}

.muted,
.field-label,
.store-selector-address,
.small,
.empty,
.pickup-store-state {
  color: var(--ui-text-secondary);
}

.primary-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.link-btn,
.tab,
.chip,
.qty button,
.bottom-nav button,
.store-selector-current,
.store-selector-option {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.primary-btn {
  border: 1px solid var(--ui-black);
  background: var(--ui-black);
  color: var(--ui-white);
  font-weight: 600;
}

.primary-btn:hover:not(:disabled) {
  background: rgba(17, 17, 17, 0.88);
}

.secondary-btn,
.danger-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
  font-weight: 500;
}

.danger-btn {
  border-color: var(--ui-border-strong);
  font-weight: 600;
}

.secondary-btn:hover:not(:disabled),
.danger-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.qty button:hover:not(:disabled) {
  background: var(--ui-hover);
}

.link-btn {
  color: var(--ui-text);
}

.link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--ui-border);
  background: var(--ui-gray);
  color: var(--ui-text-disabled);
  opacity: 1;
}

.input,
.select,
.textarea,
.quantity-input {
  border-color: var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
  box-shadow: none;
}

.input:hover,
.select:hover,
.textarea:hover,
.quantity-input:hover {
  border-color: var(--ui-border-strong);
}

.input:focus,
.select:focus,
.textarea:focus,
.quantity-input:focus {
  border-color: var(--ui-black);
  box-shadow: none;
}

select,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ui-black);
}

.product-card,
.list-card,
.form-card,
.profile-head,
.store-selector,
.radio-card,
.empty,
.inline-state,
.pickup-location-static,
.pickup-store-state {
  border-color: var(--ui-border);
  background: var(--ui-white);
  box-shadow: none;
}

.product-card,
.list-card,
.form-card,
.profile-head {
  border: 1px solid var(--ui-border);
}

.product-card:hover,
.list-card:hover {
  border-color: var(--ui-border-strong);
}

.price,
.order-detail-item-amount,
.payment-record-amount,
.checkout-summary strong {
  color: var(--ui-text);
  font-weight: 600;
}

.price-stack .muted {
  color: var(--ui-text-secondary);
}

.store-selector-current:hover,
.store-selector-option:hover,
.store-selector-option.selected {
  background: var(--ui-hover);
  color: var(--ui-text);
}

.store-selector-option.selected {
  font-weight: 600;
}

.store-selector-chevron,
.store-selector-check {
  color: var(--ui-text);
}

.tab,
.chip {
  border-color: var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text-secondary);
}

.tab:hover,
.chip:hover,
.tab.active,
.chip.active {
  border-color: var(--ui-border-strong);
  background: var(--ui-selected);
  color: var(--ui-text);
}

.tab.active,
.chip.active {
  font-weight: 600;
}

.qty button {
  border: 1px solid var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
  font-weight: 600;
}

.radio-card.active {
  border-color: var(--ui-black);
  background: var(--ui-selected);
}

.order-status {
  border: 1px solid var(--ui-border);
  background: var(--ui-gray);
  color: var(--ui-text);
  font-weight: 600;
}

.error-state,
.pickup-store-state.error {
  border: 2px solid var(--ui-border-strong);
  background: var(--ui-white);
  color: var(--ui-text);
}

.bottom-nav button {
  background: var(--ui-white);
  color: var(--ui-text-secondary);
  font-weight: 400;
}

.bottom-nav button:hover,
.bottom-nav button.active {
  background: var(--ui-hover);
  color: var(--ui-text);
}

.bottom-nav button.active {
  font-weight: 600;
}

.image-lightbox {
  background: var(--ui-overlay);
}

.image-lightbox-toolbar button,
.image-lightbox-close,
.image-lightbox-nav,
.image-lightbox-counter {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(17, 17, 17, 0.78);
  color: var(--ui-white);
}

.product-image,
.image-frame img,
.cart-item-image img,
.checkout-item-image img,
.order-detail-item-image img,
.image-lightbox-stage > img {
  filter: none !important;
}

@media (max-width: 760px) {
  .page {
    padding: 12px;
  }

  .product-card {
    border-radius: 8px;
  }
}