/*
 * Ecko Green typography baseline — Phase 1B (provisional).
 *
 * Type pick: Barlow (Tribute Type, via Google Fonts). Industrial-signage
 * heritage; fits "Established · Dependable · Local." System stack retained
 * as fallback during the webfont resolution window.
 *
 * Scale ≥1.25 between steps. Fluid sizes via clamp().
 */

:root {
    --font-sans: "Barlow", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--paper);
}

/* Prose width constraint per shared design laws (65–75ch). */
.ecko-prose {
    max-width: 70ch;
}

/* Hero headline */
.ecko-h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

/* Hero accent (kelly green sub) */
.ecko-h1-sub {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: var(--kelly);
    line-height: 1.2;
    margin: 0;
}

/* Section heading */
.ecko-h2 {
    font-size: clamp(24px, 3.5vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0;
}

/* Card title (uppercase) */
.ecko-h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}

/*
 * Eyebrow kicker. Used SPARINGLY — not as section grammar.
 * Uses --kelly-hover (not --kelly) so 11px text clears WCAG AA contrast
 * on --paper (4.6:1).
 */
.ecko-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kelly-hover);
    margin: 0 0 4px 0;
}

.ecko-small {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--mute);
}