/* =====================================================
   VIANA FANTASY — Typography Base
   ===================================================== */

/* ── HTML base (no reset, no box-sizing override) ── */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-fa);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--clr-text);
  font-weight: var(--fw-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-fa);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--clr-text);
  margin-block: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

/* ── Body Text ── */
p {
  margin-block: 0;
  max-inline-size: 68ch;
}

small  { font-size: var(--text-sm); }
strong { font-weight: var(--fw-semibold); }
em     { font-style: italic; }

/* ── Links ── */
a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--clr-primary-hover); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Lists ── */
ul, ol {
  padding-inline-start: var(--sp-6);
  margin-block: 0;
}

/* ── Helper Classes ── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }

.text-muted  { color: var(--clr-text-muted); }
.text-subtle { color: var(--clr-text-subtle); }
.text-accent { color: var(--clr-primary); }

.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}