/* ==========================================================================
   Base element styles
   ========================================================================== */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans-tc);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--text);
  background: var(--background);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif-tc);
  line-height: var(--line-height-heading);
  color: var(--text);
  letter-spacing: 0.01em;
}

h1 { font-size: var(--h1-desktop); }
h2 { font-size: var(--h2-desktop); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }

p { color: var(--text); }

.text-muted { color: var(--text-muted); }

.font-en {
  font-family: var(--font-en);
}

a {
  transition: color var(--duration-fast) var(--ease);
}

/* Visible focus state for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

img {
  object-fit: cover;
}

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-3-4  { aspect-ratio: 3 / 4; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

@media (max-width: 768px) {
  h1 { font-size: var(--h1-mobile); }
}