/* ═══════════════════════════════════════════════
   MAK PIK — Base Styles (Typography & Global)
   Fraunces (display) + Nunito Sans (body)
   ═══════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

/* ═══ HEADINGS ═══ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

.section-on-dark h1,
.section-on-dark h2,
.section-on-dark h3,
.section-on-dark h4 {
  color: var(--color-text-light);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Section titles — bilingual pattern */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  font-style: italic;
  text-align: center;
  margin-bottom: var(--space-xs);
  opacity: 0.7;
}

/* ═══ BODY TEXT ═══ */
p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-md);
  max-width: 70ch;
}

.text-large {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.text-small {
  font-size: var(--fs-small);
}

.text-caption {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* ═══ LINKS ═══ */
a {
  transition: color var(--transition-fast);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gold);
}

.link-underline:hover {
  color: var(--color-gold);
}

/* ═══ SELECTION ═══ */
::selection {
  background-color: var(--color-gold);
  color: var(--color-maroon-dark);
}

/* ═══ FOCUS STYLES ═══ */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ═══ DECORATIVE ELEMENTS ═══ */
.accent-line {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  border-radius: var(--radius-full);
  margin: var(--space-xs) auto var(--space-lg);
}

.accent-line--left {
  margin-left: 0;
}

/* ═══ DIVIDER ═══ */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border),
    transparent
  );
  margin: var(--space-2xl) 0;
}

/* ═══ SCREEN READER ONLY ═══ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}