/* Base reset & typography */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
  background: var(--bg-color, var(--bg, #0f0f12));
  color: var(--text-primary, var(--text, #fafafa));
  line-height: 1.5;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 4px rgba(207, 179, 120, 0.15));
}

.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}