/**
 * css/core/typography.css
 * ========================
 * Type scale -- headings, body copy, display text.
 * Engine-level -- applies to every page, every brand.
 * Font families, colours come from design-tokens.css → theme override.
 */

/* -- Headings -------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--theme-font-display);
    font-weight: 700;
    color: var(--theme-text);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.15;
}

h1 { font-size: clamp(2rem, 5vw, var(--hero-size, 4rem)); }
h2 { font-size: clamp(1.5rem, 3vw, var(--section-title-size, 2.4rem)); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* -- Body copy ------------------------------------------------------------- */

p {
    color: var(--theme-text-muted);
    line-height: 1.7;
}

/* -- Utility classes ------------------------------------------------------- */

.text-primary  { color: var(--theme-primary); }
.text-secondary { color: var(--theme-secondary); }
.text-muted    { color: var(--theme-text-muted); }
.text-light    { color: var(--theme-text-light); }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }

.font-display  { font-family: var(--theme-font-display); }
.font-sans     { font-family: var(--theme-font-sans); }

.uppercase     { text-transform: uppercase; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }