/*
 * Ex-Guard global brand system.
 *
 * Edit this file when a brand color, font family, type scale, weight, or
 * spacing value needs to change across the native site. The living brand
 * guide at /brand-guide/ renders these same tokens directly.
 */

/* Adobe Fonts: Trade Gothic Next Condensed, licensed through kit hbr1xkb. */
@font-face {
	font-family: "trade-gothic-next-condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("https://use.typekit.net/af/f060c3/00000000000000007735ba43/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
		url("https://use.typekit.net/af/f060c3/00000000000000007735ba43/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff");
}

@font-face {
	font-family: "trade-gothic-next-condensed";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("https://use.typekit.net/af/40e706/00000000000000007735ba54/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
		url("https://use.typekit.net/af/40e706/00000000000000007735ba54/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff");
}

:root {
	/* Core brand colors. */
	--exg-gold: #ffc800;
	--exg-gold-deep: #806100;
	--exg-black: #0a0a0a;
	--exg-charcoal: #1a1a1a;
	--exg-warm: #f6f5f1;
	--exg-white: #fff;

	/*
	 * Font-family contract: every text application must use one of these two
	 * tokens. Display is for headings, labels, and actions; body is for all
	 * readable copy, controls, metadata, and utility text.
	 */
	--exg-display: "trade-gothic-next-condensed", "Arial Narrow", Arial, sans-serif;
	--exg-body: "Barlow", Arial, sans-serif;

	/*
	 * Shared typography system: one condensed display face and one readable
	 * body face. Medium is the lightest supported body weight sitewide.
	 */
	--exg-weight-regular: 500;
	--exg-weight-semibold: 600;
	--exg-weight-strong: 700;
	--exg-weight-action: 800;
	--exg-weight-display: 800;
	--exg-weight-body: var(--exg-weight-regular);
	--exg-type-hero-size: clamp(58px, 4.45vw, 64px);
	--exg-type-hero-line: 1;
	--exg-type-hero-compact-size: clamp(42px, 3.6vw, var(--exg-type-hero-size));
	--exg-type-interior-title-size: clamp(40px, 4.3vw, 52px);
	--exg-type-category-title-size: clamp(34px, 4vw, 48px);
	--exg-type-plp-title-size: clamp(34px, 3.7vw, 44px);
	--exg-type-pdp-title-size: clamp(34px, 3.3vw, 40px);
	--exg-type-pdp-section-size: clamp(30px, 2.8vw, 36px);
	--exg-type-pdp-section-line: 1;
	--exg-type-page-title-line: 0.96;
	--exg-type-section-size: clamp(44px, 3.34vw, 48px);
	--exg-type-section-line: 1.083;
	--exg-type-card-size: 34px;
	--exg-type-card-line: 36px;
	--exg-type-card-md-size: 28px;
	--exg-type-card-md-line: 32px;
	--exg-type-card-sm-size: 24px;
	--exg-type-card-sm-line: 28px;
	--exg-type-feature-size: 20px;
	--exg-type-feature-line: 24px;
	--exg-type-eyebrow-size: 14px;
	--exg-type-eyebrow-line: 18px;
	--exg-type-lede-size: 18px;
	--exg-type-lede-line: 27px;
	--exg-type-body-lg-size: 17px;
	--exg-type-body-lg-line: 26px;
	--exg-type-body-size: 16px;
	--exg-type-body-line: 24px;
	--exg-type-small-size: 14px;
	--exg-type-small-line: 20px;
	--exg-type-utility-size: 13px;
	--exg-type-utility-line: 18px;
	--exg-type-caption-size: 12px;
	--exg-type-caption-line: 18px;
	--exg-type-micro-size: 11px;
	--exg-type-micro-line: 16px;
	--exg-type-legal-size: 10px;
	--exg-type-legal-line: 15px;
	--exg-type-action-size: 15px;
	--exg-type-action-line: 20px;
	--exg-tracking-label: 0.08em;
	--exg-tracking-meta: 0.04em;

	/* Shared rectangular action contract. Icon controls, tabs, swatches, and
	 * form-specific controls intentionally remain outside this system. */
	--exg-button-height: 48px;
	--exg-button-height-mobile: 44px;
	--exg-button-padding-inline: 20px;
	--exg-button-padding-inline-mobile: 16px;
	--exg-button-gap: 12px;
	--exg-button-border-width: 2px;
	--exg-button-radius: 4px;

	/* Shared spacing scale and heading-stack rhythm. */
	--exg-space-1: 4px;
	--exg-space-2: 8px;
	--exg-space-3: 12px;
	--exg-space-4: 16px;
	--exg-space-5: 20px;
	--exg-space-6: 24px;
	--exg-space-7: 32px;
	--exg-space-8: 40px;
	--exg-space-9: 48px;
	--exg-space-10: 64px;
	--exg-stack-eyebrow-gap: var(--exg-space-2);
	--exg-stack-title-gap: var(--exg-space-4);
	--exg-stack-content-gap: var(--exg-space-6);
	--exg-stack-actions-gap: var(--exg-space-7);
	--exg-section-space: clamp(64px, 6vw, 88px);
	--exg-section-space-compact: clamp(48px, 4.5vw, 64px);
}

@media (max-width: 1020px) {
	body.exg-shell {
		--exg-type-hero-size: 56px;
		--exg-type-hero-line: 56px;
		--exg-type-section-size: 44px;
		--exg-type-section-line: 48px;
		--exg-type-card-size: 32px;
		--exg-type-card-line: 34px;
	}
}

@media (max-width: 640px) {
	body.exg-shell {
		--exg-type-hero-size: 46px;
		--exg-type-hero-line: 46px;
		--exg-type-section-size: 39px;
		--exg-type-section-line: 42px;
		--exg-type-card-size: 30px;
		--exg-type-card-line: 32px;
	}
}