/* =========================================================
   RED DZAO — BASE
   Kiểu chữ và phần tử HTML cơ bản
   ========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

h1, h2, h3, .heading-font {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--text-primary);
}

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

p {
  max-width: 62ch;
}

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

/* Trạng thái focus rõ ràng cho điều hướng bàn phím */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Ẩn nội dung khỏi màn hình nhưng vẫn đọc được bởi trình đọc màn hình */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "bỏ qua tới nội dung chính" cho người dùng bàn phím */
.skip-link {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  left: 8px;
  z-index: 200;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transform: translateY(-140%);
  transition: transform var(--dur-fast) ease;
}

.skip-link:focus {
  transform: translateY(0);
}

::selection {
  background: var(--color-red);
  color: var(--color-ivory-soft);
}