@import url("./styles/base.css");
@import url("./styles/howbazaar.css");
@import url("./styles/components.css");

/* Local overrides that rely on official theme tokens */

:root {
  --detail-heading-font: "Noto Sans SC", var(--font-sans);
  --detail-heading-color-light: #3b2a1e;
  --detail-heading-color-dark: #f0d4ac;
  --detail-media-surface: rgba(18, 11, 6, 0.85);
}

body {
  font-family: var(--font-sans);
}

/* Detail readability overrides */
.text-bazaar-tan300 {
  color: #463426;
}

.text-bazaar-tan500 {
  color: #6b4a30;
}

.text-bazaar-tan600 {
  color: #544031;
}

.text-bazaar-tan700 {
  color: #3b2a1e;
}

.dark .text-bazaar-tan300 {
  color: #f7e2c4;
}

.dark .text-bazaar-tan500,
.dark .text-bazaar-tan600 {
  color: #f0d4ac;
}

.dark .text-bazaar-tan700 {
  color: #eac38a;
}

.dark .dark\:text-bazaar-tan300 {
  color: #f7e2c4;
}

.dark .dark\:text-bazaar-tan500,
.dark .dark\:text-bazaar-tan600 {
  color: #f0d4ac;
}

.dark .dark\:text-bazaar-tan700 {
  color: #eac38a;
}

.detail-copy {
  color: #463426;
}

.dark .detail-copy {
  color: #f0d4ac;
}

.detail-hero__title {
  font-family: var(--detail-heading-font, var(--font-sans));
  color: var(--detail-heading-color-light, #3b2a1e);
  letter-spacing: 0.02em;
}

.dark .detail-hero__title {
  color: var(--detail-heading-color-dark, #f0d4ac);
}

.detail-hero__media {
  width: 100%;
}

.detail-hero__frame {
  width: min(360px, 100%);
  aspect-ratio: 4 / 3;
  background: var(--detail-media-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.dark .detail-hero__frame {
  background: rgba(20, 14, 9, 0.95);
}

.detail-hero__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.focus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background: rgba(255, 188, 112, 0.12);
  color: #463426;
}

.dark .focus-banner {
  background: rgba(255, 188, 112, 0.2);
  color: #f0d4ac;
}

.focus-banner__label {
  font-size: 0.95rem;
  font-weight: 600;
}

.focus-banner__action {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  padding: 0.35rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.focus-banner__action:hover,
.focus-banner__action:focus-visible {
  background: rgba(255, 156, 28, 0.18);
  border-color: #ff9c1c;
  color: #ff9c1c;
  outline: none;
}

.dark .focus-banner__action:hover,
.dark .focus-banner__action:focus-visible {
  background: rgba(255, 188, 112, 0.28);
  color: #ffcc8b;
  border-color: #ffcc8b;
}