/*
 * Brightway Consultancy — typography.css
 * Self-hosted @font-face + headings + body + eyebrow. MASTER.md §4.
 * Depends on tokens.css (font stacks, fluid scale) + base.css.
 *
 * FONT SOURCE TRACEABILITY (for audits):
 *   - Fraunces (variable): @fontsource-variable/fraunces@5.2.9 (npm,
 *     via jsdelivr, version pinned), file fraunces-latin-full-normal.woff2
 *     (axes: opsz + wght + SOFT + WONK). Downloaded 2026-05-18.
 *   - Barlow 400/500/600 (static): google-webfonts-helper
 *     (gwfh.mranftl.com), Barlow v13, subset latin. Downloaded 2026-05-18.
 *   Subset: latin only (BRIEF Decision Log 2026-05-18, EN-only site).
 *   Self-hosted in ../fonts/ → RGPD-compliant (no Google CDN at runtime).
 *   JetBrains Mono deferred to Phase 8.6 (Insights blog).
 */

/* --- @font-face --------------------------------------------------------- */

/* Fraunces — variable display (weight 100–900, SOFT axis used at 10) */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-variable.woff2') format('woff2');
	font-weight: 100 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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow — static body weights */
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-400.woff2') format('woff2');
	font-weight: 400;
	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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-500.woff2') format('woff2');
	font-weight: 500;
	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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Barlow';
	src: url('../fonts/barlow-600.woff2') format('woff2');
	font-weight: 600;
	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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Headings (MASTER.md §4.4) ------------------------------------------ */
/* h1–h4 = Fraunces variable: wght via font-weight, opsz auto, SOFT 10.
 * SOFT 10 to be validated visually in Phase 5 (range 5–20, BRIEF §4). */

h1,
h2,
h3,
h4 {
	font-family: var(--bwc-font-display);
	font-optical-sizing: auto;
	font-variation-settings: 'SOFT' 10;
	color: var(--bwc-text);
}

h1 {
	font-size: var(--bwc-fs-display);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 520; /* MASTER §4.4 range 480–560 */
}

h2 {
	font-size: var(--bwc-fs-3xl);
	line-height: 1.10;
	letter-spacing: -0.02em;
	font-weight: 480;
}

h3 {
	font-size: var(--bwc-fs-2xl);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 460;
}

h4 {
	font-size: var(--bwc-fs-xl);
	line-height: 1.20;
	letter-spacing: -0.01em;
	font-weight: 460;
}

/* --- Keyword accent — metallic gold engrave on H1/H2 keywords ----------- */
/* Inline <span class="bwc-gold"> wrapping ONE keyword inside a Fraunces
 * heading (≥32px display). Clips the vertical engrave gradient to the
 * glyphs for an incised-metal accent. Reserved for large display type per
 * the colour contract — never on eyebrows (10px) or body.
 *
 * Pattern: flat gold is the BASE (covers print + any engine without
 * background-clip:text). The gradient + transparent fill apply ONLY inside
 * @supports — this is load-bearing: -webkit-text-fill-color is a WebKit
 * property that IS supported even where background-clip:text is NOT, so
 * setting it unconditionally would render the word invisible on those
 * engines. Gating it behind the clip @supports keeps the fallback legible. */
.bwc-gold {
	color: var(--bwc-accent-gold);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.bwc-gold {
		background-image: var(--bwc-accent-gold-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* h5–h6 = Barlow 600 (small serif headings look weak) */
h5,
h6 {
	font-family: var(--bwc-font-body);
	font-weight: 600;
	color: var(--bwc-text);
}

h5 {
	font-size: var(--bwc-fs-lg);
	line-height: 1.25;
	letter-spacing: 0;
}

h6 {
	font-size: var(--bwc-fs-base);
	line-height: 1.30;
	letter-spacing: 0.02em;
}

/* --- Body (MASTER.md §4.5) ---------------------------------------------- */

p,
li {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.6;
	color: var(--bwc-text);
}

p {
	max-inline-size: var(--bwc-content-max); /* 72ch readable measure */
}

strong,
b {
	font-weight: 600;
}

em,
i {
	font-weight: 500;
	font-style: italic;
}

/* Body/content links — accent red (structural links styled in components) */
p a,
li a {
	color: var(--bwc-accent-red);
}

::selection {
	background-color: var(--bwc-accent-red);
	color: var(--bwc-text);
}

/* --- Eyebrow tag (MASTER.md §4.6 — typographic part only) --------------- */

.bwc-eyebrow {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-eyebrow); /* 10px */
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 500;
	color: var(--bwc-accent-gold);
}