/* ============================================================
 * ds-typography — MODEC type-scale utility classes.
 *
 * Mirrors the variants shown in the MODEC Foundations "Default
 * typography" reference (h1–h6, subtitle1/2, body1/2, caption,
 * overline). Apply via class — e.g. `<h6 class="ds-text-h6">` —
 * instead of composing font-* properties at every callsite.
 *
 * Canonical values per MODEC reference (verified 2026-05-29):
 *
 *   variant     size  weight  line-h  letter-sp  gutter-bot
 *   h1          60    300     1.25    -1.5px     34px
 *   h2          48    300     1.33    -0.5px     20px
 *   h3          40    400     1.33     0          16px
 *   h4          32    400     1.42     0.25px     12px
 *   h5          24    400     1.42     0          8px
 *   h6          20    500     1.33     0.15px     4px
 *   subtitle1   16    500     1.75     0.15px     6px
 *   subtitle2   14    400     1.5      0.1px      4px
 *   body1       16    500     1.5      0.15px     6px
 *   body2       14    400     1.42     0.17px     4px
 *   caption     12    400     1.66     0.4px      4px
 *   OVERLINE    12    400     1.66     1px        4px  (uppercase)
 *
 * Every variant uses --font-family-sans (Noto Sans, loaded via the
 * Google Fonts <link> in index.html).
 *
 * Default = no gutter (margin: 0). Add `--gutter` modifier when the
 * variant is used as a heading/paragraph that needs its canonical
 * bottom spacing.
 * ============================================================ */
@layer components {

.ds-text-h1,
.ds-text-h2,
.ds-text-h3,
.ds-text-h4,
.ds-text-h5,
.ds-text-h6,
.ds-text-subtitle1,
.ds-text-subtitle2,
.ds-text-body1,
.ds-text-body2,
.ds-text-caption,
.ds-text-overline {
  font-family: var(--font-family-sans);
  margin: 0;
}

/* ── Headings ───────────────────────────────────────────────── */
.ds-text-h1 {
  font-size: 60px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -1.5px;
}
.ds-text-h1--gutter { margin-bottom: 34px; }

.ds-text-h2 {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.33;
  letter-spacing: -0.5px;
}
.ds-text-h2--gutter { margin-bottom: 20px; }

.ds-text-h3 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 0;
}
.ds-text-h3--gutter { margin-bottom: 16px; }

.ds-text-h4 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.25px;
}
.ds-text-h4--gutter { margin-bottom: 12px; }

.ds-text-h5 {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0;
}
.ds-text-h5--gutter { margin-bottom: 8px; }

.ds-text-h6 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.15px;
}
.ds-text-h6--gutter { margin-bottom: 4px; }

/* ── Subtitles ──────────────────────────────────────────────── */
.ds-text-subtitle1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.15px;
}
.ds-text-subtitle1--gutter { margin-bottom: 6px; }

.ds-text-subtitle2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1px;
}
.ds-text-subtitle2--gutter { margin-bottom: 4px; }

/* ── Body ───────────────────────────────────────────────────── */
.ds-text-body1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.15px;
}
.ds-text-body1--gutter { margin-bottom: 6px; }

.ds-text-body2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.17px;
}
.ds-text-body2--gutter { margin-bottom: 4px; }

/* ── Small ──────────────────────────────────────────────────── */
.ds-text-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.4px;
}
.ds-text-caption--gutter { margin-bottom: 4px; }

.ds-text-overline {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-text-overline--gutter { margin-bottom: 4px; }

} /* end @layer components */