/* ==========================================================================
   AKSO — Typography
   Self-hosted font-face declarations + base type system.

   Display / UI:  General Sans (variable, wght 400–700)
                  Free, self-hostable neo-grotesque from Fontshare
                  (Indian Type Foundry). Not distributed via a CDN/registry
                  we can fetch from this environment, so the files are
                  referenced here but must be added by hand — see
                  /assets/fonts/general-sans/README.md for the exact
                  (already-matched) filenames to drop in. The system
                  degrades gracefully to the system sans stack until then.

   Accent:        Fraunces (variable, SIL OFL) — self-hosted for real,
                  used sparingly as an italic editorial accent only.
   ========================================================================== */

/* ---------------------------------------------------------------------
   General Sans — variable font, weights 400–700
   Filenames are pre-matched to Fontshare's default export naming.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/general-sans/GeneralSans-Variable.woff") format("woff-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-VariableItalic.woff2") format("woff2-variations"),
       url("/assets/fonts/general-sans/GeneralSans-VariableItalic.woff") format("woff-variations");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   Fraunces — variable font, self-hosted (Latin + Latin-Extended)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces/fraunces-variable-latin-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces/fraunces-variable-latin-ext-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces/fraunces-variable-latin-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Fraunces Variable";
  src: url("/assets/fonts/fraunces/fraunces-variable-latin-ext-italic.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   Base type
   --------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-lead); font-weight: var(--weight-medium); }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

p + p {
  margin-top: var(--space-3);
}

a {
  color: inherit;
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

em, i {
  font-style: italic;
}

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

/* ---------------------------------------------------------------------
   Typographic utility classes
   --------------------------------------------------------------------- */

/* Oversized cinematic display line — hero titles */
.text-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Small uppercase tracked-out label — used for eyebrows, nav, meta */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Caption / metadata under images, in galleries */
.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Larger intro/lead paragraph */
.text-lead {
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* The single editorial accent voice — used sparingly (pull quotes, taglines) */
.text-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

/* Muted secondary text */
.text-muted {
  color: var(--color-text-muted);
}

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

/* Body copy constrained to a comfortable reading measure */
.text-measure {
  max-width: var(--container-narrow);
}

@media (max-width: 768px) {
  .text-lead {
    font-size: clamp(1rem, 3vw, 1.15rem);
  }
}