/* ============================================================
   TYPOGRAPHY.CSS — globaalit font__-luokat + kontekstivärit
   Kaikki fontti- ja värimäärittelyt täällä.
   Ei hardcodata värejä komponentteihin (paitsi font__eyebrow = aina accent).

   Barlow Condensed — display headings, logo
   Barlow           — body, nav, UI, eyebrow
   ============================================================ */

/* ---- Display — Barlow Condensed ---- */

.font__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, var(--fs-h1));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.font__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, var(--fs-h2));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}

.font__h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0em;
  margin: 0;
}

.font__h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0em;
  margin: 0;
}

/* ---- Eyebrow — AINA accent-väri ---- */

.font__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-accent);
  display: block;
  margin-bottom: -0.15rem;
}

/* ---- Body — Barlow ---- */

.font__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
  margin: 0;
}

.font__small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---- Versaalit — nav + UI ---- */

.font__nav {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}

.font__ui {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* ---- Logo ---- */

.font__logo {
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

/* ============================================================
   KONTEKSTIVÄRIT — .light / .dark / .on-image
   ============================================================ */

/* ---- .light ---- */

.light h1, .light h2, .light h3, .light h4,
.light .font__h1, .light .font__h2, .light .font__h3, .light .font__h4 {
  color: var(--color-text);
}

.light p, .light li, .light address,
.light .font__body, .light .font__small {
  color: var(--color-text-muted);
}

.light .font__nav, .light .font__ui { color: var(--color-text); }
.light .font__eyebrow              { color: var(--color-accent); }
.light a                           { color: inherit; text-decoration: none; }

/* ---- .dark ---- */

.dark h1, .dark h2, .dark h3, .dark h4,
.dark .font__h1, .dark .font__h2, .dark .font__h3, .dark .font__h4 {
  color: var(--color-text-on-dark);
}

.dark p, .dark li, .dark address,
.dark .font__body, .dark .font__small {
  color: var(--color-text-on-dark-muted);
}

.dark .font__nav, .dark .font__ui { color: var(--color-text-on-dark); }
.dark .font__eyebrow              { color: var(--color-accent); }
.dark a                           { color: var(--color-text-on-dark); text-decoration: none; }
.dark a:hover                     { color: var(--color-accent); }

/* ---- .on-image — ei muuta taustaa, pakottaa tekstit valkoisiksi ---- */

.on-image h1, .on-image h2, .on-image h3, .on-image h4,
.on-image .font__h1, .on-image .font__h2, .on-image .font__h3 {
  color: var(--color-text-on-dark);
}

.on-image p, .on-image .font__body, .on-image .font__small {
  color: var(--color-text-on-dark-muted);
}

.on-image .font__nav, .on-image .font__ui { color: var(--color-text-on-dark); }
.on-image .font__eyebrow                   { color: var(--color-accent); }

/* ---- section-header — eyebrow + otsikko tiukasti kiinni toisissaan ---- */

.section-header {
  display: flex;
  flex-direction: column;
}