/**
 * Text styles from Figma (Guideline / Typography), read via get_variable_defs
 * on the home screen nodes (9:9 = Narrow/<720, 9:249 = Wide/>=720).
 *
 * IMPORTANT: Figma reports letterSpacing as a PERCENTAGE of font-size, not
 * raw px (confirmed by comparing get_variable_defs's "Heading/Narrow"
 * letterSpacing:-1 against get_design_context's rendered tracking-[-0.24px]
 * on a 24px heading: -1% * 24px = -0.24px). All letter-spacing values below
 * are pre-converted to px from that percentage.
 *
 * Styles below are shared across both widths: Eyebrow, Eyebrow/EN, Body,
 * Body S, Label, Label S, Caption, Subhead.
 *
 * Styles with distinct Narrow/Wide values swap inside @container site
 * (min-width: 720px): Heading, Mincho/Heading, Mincho/Quote,
 * Mincho/Statement, Emphasis, Onomatopoeia 01-06.
 *
 * Catch (hero headline) — only its Narrow value was present in the sampled
 * node; its Wide value was not returned and must be confirmed against
 * Figma when the Hero section is implemented (Phase C).
 */

/* -- Shared across all container widths -- */

.ds-eyebrow {
	font: 700 12px/1 var(--font-sans);
	letter-spacing: 0.96px; /* 8% of 12px */
}

.ds-eyebrow-en {
	font: 500 16px/1.4 var(--font-dm-sans);
	font-style: italic;
}

.ds-body {
	font: 400 16px/1.8 var(--font-sans);
}

.ds-body-s {
	font: 400 14px/1.7 var(--font-sans);
}

.ds-label {
	font: 700 16px/1 var(--font-sans);
}

.ds-label-s {
	font: 700 14px/1 var(--font-sans);
}

.ds-caption {
	font: 400 12px/1.6 var(--font-sans);
}

.ds-subhead {
	font: 700 20px/1.5 var(--font-sans);
}

/* -- Narrow (<720) defaults, overridden for Wide (>=720) below -- */

.ds-catch {
	font: 800 40px/1.5 var(--font-mincho);
}

.ds-heading {
	font: 700 24px/1.4 var(--font-sans);
	letter-spacing: -0.24px; /* -1% of 24px */
}

.ds-mincho-heading {
	font: 700 26px/1.55 var(--font-mincho);
	letter-spacing: 1.04px; /* 4% of 26px */
}

.ds-mincho-quote {
	font: 800 19px/1.85 var(--font-mincho);
	letter-spacing: 0.76px; /* 4% of 19px */
}

.ds-mincho-statement {
	font: 600 16px/2.1 var(--font-mincho);
}

.ds-emphasis {
	font: 700 18px/1.7 var(--font-sans);
}

.ds-onomatopoeia-01 {
	font: 400 42px/1.2 var(--font-ono-water);
	letter-spacing: 1.68px; /* 4% of 42px */
}

.ds-onomatopoeia-02 {
	font: 400 42px/1.2 var(--font-ono-electric);
	letter-spacing: 5.04px; /* 12% of 42px */
}

.ds-onomatopoeia-03 {
	font: 400 48px/1.15 var(--font-ono-wood);
	letter-spacing: 2.88px; /* 6% of 48px */
}

.ds-onomatopoeia-04 {
	font: 400 40px/1.2 var(--font-ono-peel);
	letter-spacing: 0.8px; /* 2% of 40px */
}

.ds-onomatopoeia-05 {
	font: 400 45px/1.2 var(--font-ono-air);
	letter-spacing: 2.7px; /* 6% of 45px */
}

.ds-onomatopoeia-06 {
	font: 400 41px/1.2 var(--font-ono-rattle);
	letter-spacing: 1.64px; /* 4% of 41px */
}

@container site (min-width: 720px) {
	.ds-heading {
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: -0.32px; /* -1% of 32px */
	}

	.ds-mincho-heading {
		font-size: 36px;
		line-height: 1.5;
		letter-spacing: 1.44px; /* 4% of 36px */
	}

	.ds-mincho-quote {
		font-size: 24px;
		line-height: 1.8;
		letter-spacing: 0.96px; /* 4% of 24px */
	}

	.ds-mincho-statement {
		font-size: 20px;
		line-height: 2.1;
		letter-spacing: 0.8px; /* 4% of 20px */
	}

	.ds-emphasis {
		font-size: 20px;
	}

	.ds-onomatopoeia-01 {
		font-size: 57px;
		letter-spacing: 2.28px; /* 4% of 57px */
	}

	.ds-onomatopoeia-02 {
		font-size: 54px;
		letter-spacing: 6.48px; /* 12% of 54px */
	}

	.ds-onomatopoeia-03 {
		font-size: 63px;
		letter-spacing: 3.78px; /* 6% of 63px */
	}

	.ds-onomatopoeia-04 {
		font-size: 54px;
		letter-spacing: 1.08px; /* 2% of 54px */
	}

	.ds-onomatopoeia-05 {
		font-size: 60px;
		letter-spacing: 3.6px; /* 6% of 60px */
	}

	.ds-onomatopoeia-06 {
		font-size: 54px;
		letter-spacing: 2.16px; /* 4% of 54px */
	}
}