/**
 * Typography tokens — WREN WOLD.
 *
 * Display: Fraunces (Undercase Type / Google Fonts) — SIL OFL 1.1
 * Body/UI: Source Sans 3 (Adobe) — SIL OFL 1.1
 *
 * @package Fashion_Brand_Theme
 */

:root {
	/* Font families */
	--font-family-display: "Fraunces", "Times New Roman", Times, serif;
	--font-family-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Font weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* Line heights */
	--line-height-tight: 1.15;
	--line-height-snug: 1.3;
	--line-height-base: 1.6;
	--line-height-relaxed: 1.75;

	/* Font sizes — fluid scales */
	--font-size-display-xl: clamp(2.75rem, 5.5vw + 1rem, 4.75rem);
	--font-size-display: clamp(2.125rem, 3.5vw + 0.85rem, 3.5rem);
	--font-size-chapter: clamp(3.25rem, 9vw + 0.75rem, 7.5rem);
	--font-size-statement: clamp(1.375rem, 1.8vw + 0.6rem, 2rem);
	--font-size-h1: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
	--font-size-h2: clamp(1.375rem, 1.5vw + 0.7rem, 1.875rem);
	--font-size-h3: clamp(1.125rem, 0.6vw + 0.85rem, 1.375rem);
	--font-size-body-lg: clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);
	--font-size-body: 1rem;
	--font-size-small: 0.875rem;
	--font-size-caption: 0.8125rem;
	--font-size-label: 0.75rem;
	--font-size-nav: 0.9375rem;
	--font-size-button: 0.9375rem;
	--font-size-price: 1rem;
	--font-size-product: 1rem;

	/* Composite typography tokens */
	--font-display-xl: var(--font-weight-regular) var(--font-size-display-xl) / var(--line-height-tight) var(--font-family-display);
	--font-display: var(--font-weight-regular) var(--font-size-display) / var(--line-height-tight) var(--font-family-display);
	--font-chapter: var(--font-weight-regular) var(--font-size-chapter) / 0.9 var(--font-family-display);
	--font-statement: var(--font-weight-regular) var(--font-size-statement) / var(--line-height-snug) var(--font-family-display);
	--font-h1: var(--font-weight-regular) var(--font-size-h1) / var(--line-height-tight) var(--font-family-display);
	--font-h2: var(--font-weight-regular) var(--font-size-h2) / var(--line-height-snug) var(--font-family-display);
	--font-h3: var(--font-weight-medium) var(--font-size-h3) / var(--line-height-snug) var(--font-family-base);
	--font-body-lg: var(--font-weight-regular) var(--font-size-body-lg) / var(--line-height-relaxed) var(--font-family-base);
	--font-body: var(--font-weight-regular) var(--font-size-body) / var(--line-height-base) var(--font-family-base);
	--font-small: var(--font-weight-regular) var(--font-size-small) / var(--line-height-base) var(--font-family-base);
	--font-caption: var(--font-weight-regular) var(--font-size-caption) / var(--line-height-base) var(--font-family-base);
	--font-label: var(--font-weight-medium) var(--font-size-label) / var(--line-height-snug) var(--font-family-base);
	--font-nav: var(--font-weight-medium) var(--font-size-nav) / var(--line-height-snug) var(--font-family-base);
	--font-button: var(--font-weight-medium) var(--font-size-button) / var(--line-height-snug) var(--font-family-base);
	--font-price: var(--font-weight-medium) var(--font-size-price) / var(--line-height-snug) var(--font-family-base);
	--font-product: var(--font-weight-medium) var(--font-size-product) / var(--line-height-snug) var(--font-family-base);

	/* Letter spacing */
	--letter-spacing-display: -0.025em;
	--letter-spacing-heading: -0.015em;
	--letter-spacing-body: 0;
	--letter-spacing-label: 0.06em;
	--letter-spacing-nav: 0.02em;
	--letter-spacing-button: 0.02em;
}