/* =========================================================
 * Tech Resolve — Typography System
 * Version: 3.0.0
 * Global + Arabic Typography Foundation
 * ======================================================= */
/* =========================================================
 * Arabic Font
 * ======================================================= */
@font-face {
	font-family: "Alexandria";
	src: url("../fonts/alexandria/Alexandria-VariableFont_wght.ttf");
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}
/* =========================================================
 * Typography Tokens
 * ======================================================= */
:root {
	--tr-heading-hero: clamp(56px, 6vw, 94px);
	--tr-heading-page: clamp(48px, 5vw, 76px);
	--tr-heading-section: clamp(40px, 3.35vw, 54px);
	--tr-heading-subsection: clamp(30px, 2.5vw, 40px);
	--tr-heading-large: clamp(34px, 3.5vw, 52px);
	--tr-heading-card: clamp(23px, 2.1vw, 30px);
	--tr-heading-small: clamp(19px, 1.45vw, 23px);
	--tr-text-body: clamp(18px, calc(17.4px + 0.14vw), 20px);
	--tr-text-card: clamp(17px, calc(16.4px + 0.11vw), 18px);
	--tr-text-ui: clamp(14px, calc(13.6px + 0.08vw), 15px);
	--tr-text-label: clamp(12px, calc(11.5px + 0.07vw), 13px);
	--tr-line-hero: 0.98;
	--tr-line-page: 1.02;
	--tr-line-heading: 1.08;
	--tr-line-subheading: 1.14;
	--tr-line-body: 1.7;
	--tr-line-card: 1.6;
	--tr-line-ui: 1.45;
	--tr-weight-body: 400;
	--tr-weight-medium: 500;
	--tr-weight-semibold: 600;
	--tr-weight-bold: 700;
	--tr-weight-label: 800;
	--tr-font-arabic: "Alexandria", sans-serif;
}
/* =========================================================
 * Arabic Token Scale
 * ======================================================= */
html[lang^="ar"] {
	--tr-heading-hero: clamp(50px, 5.6vw, 82px);
	--tr-heading-page: clamp(46px, 4.8vw, 70px);
	--tr-heading-section: clamp(38px, 3.35vw, 52px);
	--tr-heading-subsection: clamp(28px, 2.4vw, 38px);
	--tr-heading-large: clamp(31px, 3.1vw, 46px);
	--tr-heading-card: clamp(21px, 1.9vw, 28px);
	--tr-heading-small: clamp(18px, 1.35vw, 22px);
	--tr-text-body: clamp(18px, calc(17.4px + 0.14vw), 20px);
	--tr-text-card: clamp(16px, calc(15.6px + 0.11vw), 18px);
	--tr-text-ui: clamp(14px, calc(13.6px + 0.08vw), 15px);
	--tr-text-label: clamp(12px, calc(11.5px + 0.07vw), 13px);
	--tr-line-hero: 1.14;
	--tr-line-page: 1.18;
	--tr-line-heading: 1.28;
	--tr-line-subheading: 1.3;
	--tr-line-body: 1.9;
	--tr-line-card: 1.8;
	--tr-line-ui: 1.55;
}
/* =========================================================
 * Typography Utilities
 * ======================================================= */
.tr-heading-hero {
	font-size: var(--tr-heading-hero);
	font-weight: var(--tr-weight-bold);
	line-height: var(--tr-line-hero);
}
.tr-heading-page {
	font-size: var(--tr-heading-page);
	font-weight: var(--tr-weight-bold);
	line-height: var(--tr-line-page);
}
.tr-heading-section {
	font-size: var(--tr-heading-section);
	font-weight: var(--tr-weight-bold);
	line-height: var(--tr-line-heading);
}
.tr-heading-subsection {
	font-size: var(--tr-heading-subsection);
	font-weight: var(--tr-weight-bold);
	line-height: var(--tr-line-subheading);
}
.tr-heading-card {
	font-size: var(--tr-heading-card);
	font-weight: var(--tr-weight-bold);
	line-height: var(--tr-line-subheading);
}
.tr-text-body {
	font-size: var(--tr-text-body);
	font-weight: var(--tr-weight-body);
	line-height: var(--tr-line-body);
}
.tr-text-card {
	font-size: var(--tr-text-card);
	font-weight: var(--tr-weight-body);
	line-height: var(--tr-line-card);
}
.tr-text-ui {
	font-size: var(--tr-text-ui);
	font-weight: var(--tr-weight-medium);
	line-height: var(--tr-line-ui);
}
.tr-text-label {
	font-size: var(--tr-text-label);
	font-weight: var(--tr-weight-label);
	line-height: var(--tr-line-ui);
}
/* =========================================================
 * Compatibility Layer
 * Temporary global mapping while module CSS is normalized.
 * ======================================================= */
body [class*="__eyebrow"] {
	font-size: var(--tr-text-ui) !important;
	font-weight: var(--tr-weight-label) !important;
	line-height: var(--tr-line-ui) !important;
}
body section[class^="tr-"] [class*="__heading-grid"] h2,
body section[class*=" tr-"] [class*="__heading-grid"] h2 {
	font-size: var(--tr-heading-section) !important;
	font-weight: var(--tr-weight-bold) !important;
	line-height: var(--tr-line-heading) !important;
}
body section[class^="tr-"] [class*="__heading-grid"] > p,
body section[class*=" tr-"] [class*="__heading-grid"] > p {
	font-size: var(--tr-text-body) !important;
	font-weight: var(--tr-weight-body) !important;
	line-height: var(--tr-line-body) !important;
}
body section[class^="tr-"] article > p,
body section[class*=" tr-"] article > p,
body section[class^="tr-"] [class*="__content"] > p,
body section[class*=" tr-"] [class*="__content"] > p {
	font-size: var(--tr-text-body) !important;
	font-weight: var(--tr-weight-body) !important;
	line-height: var(--tr-line-body) !important;
}
body section[class^="tr-"] [class*="__feature"] > p,
body section[class*=" tr-"] [class*="__feature"] > p,
body section[class^="tr-"] [class*="__pillar"] > p,
body section[class*=" tr-"] [class*="__pillar"] > p,
body section[class^="tr-"] [class*="__principle"] > p,
body section[class*=" tr-"] [class*="__principle"] > p,
body section[class^="tr-"] [class*="__system"] > p,
body section[class*=" tr-"] [class*="__system"] > p,
body section[class^="tr-"] [class*="__stage"] > p,
body section[class*=" tr-"] [class*="__stage"] > p,
body section[class^="tr-"] [class*="__path"] > p,
body section[class*=" tr-"] [class*="__path"] > p,
body section[class^="tr-"] [class*="__phase-copy"] > p,
body section[class*=" tr-"] [class*="__phase-copy"] > p {
	font-size: var(--tr-text-card) !important;
	font-weight: var(--tr-weight-body) !important;
	line-height: var(--tr-line-card) !important;
}
body section[class^="tr-"] article > h3,
body section[class*=" tr-"] article > h3,
body section[class^="tr-"] [class*="__feature"] > h3,
body section[class*=" tr-"] [class*="__feature"] > h3,
body section[class^="tr-"] [class*="__pillar"] > h3,
body section[class*=" tr-"] [class*="__pillar"] > h3,
body section[class^="tr-"] [class*="__principle"] > h3,
body section[class*=" tr-"] [class*="__principle"] > h3,
body section[class^="tr-"] [class*="__system"] > h3,
body section[class*=" tr-"] [class*="__system"] > h3 {
	font-size: var(--tr-heading-card) !important;
	font-weight: var(--tr-weight-bold) !important;
	line-height: var(--tr-line-subheading) !important;
}
body [class*="__code"],
body [class*="__meta"],
body [class*="__number"],
body [class*="__index"],
body [class*="__rail"] {
	font-size: var(--tr-text-label) !important;
	font-weight: var(--tr-weight-label) !important;
	line-height: var(--tr-line-ui) !important;
}
body [class*="-faq__question"] > strong {
	font-size: var(--tr-heading-card) !important;
	font-weight: var(--tr-weight-bold) !important;
	line-height: var(--tr-line-subheading) !important;
}
body [class*="-faq__panel"] p {
	font-size: var(--tr-text-body) !important;
	font-weight: var(--tr-weight-body) !important;
	line-height: var(--tr-line-body) !important;
}
body section[class^="tr-"] a[class*="__button"],
body section[class*=" tr-"] a[class*="__button"],
body section[class^="tr-"] button[class*="__button"],
body section[class*=" tr-"] button[class*="__button"] {
	font-size: var(--tr-text-ui) !important;
	font-weight: var(--tr-weight-label) !important;
	line-height: var(--tr-line-ui) !important;
}
body section[class^="tr-"] small,
body section[class*=" tr-"] small {
	font-size: var(--tr-text-label) !important;
	font-weight: var(--tr-weight-label) !important;
	line-height: var(--tr-line-ui) !important;
}
/* =========================================================
 * Arabic Typography
 * ======================================================= */
html[lang^="ar"] body.techresolve-site {
	font-family: var(--tr-font-arabic);
}
html[lang^="ar"] body.techresolve-site h1,
html[lang^="ar"] body.techresolve-site h2,
html[lang^="ar"] body.techresolve-site h3,
html[lang^="ar"] body.techresolve-site h4,
html[lang^="ar"] body.techresolve-site h5,
html[lang^="ar"] body.techresolve-site h6,
html[lang^="ar"] body.techresolve-site p,
html[lang^="ar"] body.techresolve-site a,
html[lang^="ar"] body.techresolve-site button,
html[lang^="ar"] body.techresolve-site input,
html[lang^="ar"] body.techresolve-site textarea,
html[lang^="ar"] body.techresolve-site select,
html[lang^="ar"] body.techresolve-site option,
html[lang^="ar"] body.techresolve-site label,
html[lang^="ar"] body.techresolve-site small,
html[lang^="ar"] body.techresolve-site strong {
	font-family: var(--tr-font-arabic);
}
html[lang^="ar"] body.techresolve-site h1,
html[lang^="ar"] body.techresolve-site h2,
html[lang^="ar"] body.techresolve-site h3,
html[lang^="ar"] body.techresolve-site h4,
html[lang^="ar"] body.techresolve-site h5,
html[lang^="ar"] body.techresolve-site h6,
html[lang^="ar"] body.techresolve-site [class*="__eyebrow"],
html[lang^="ar"] body.techresolve-site [class*="__label"],
html[lang^="ar"] body.techresolve-site [class*="__code"],
html[lang^="ar"] body.techresolve-site [class*="__meta"],
html[lang^="ar"] body.techresolve-site [class*="__number"],
html[lang^="ar"] body.techresolve-site [class*="__index"],
html[lang^="ar"] body.techresolve-site [class*="__rail"] {
	letter-spacing: 0 !important;
}
/* =========================================================
 * Mobile Typography Scale
 * ======================================================= */
@media (max-width: 700px) {
	:root {
		--tr-heading-hero: clamp(46px, 12vw, 66px);
		--tr-heading-page: clamp(42px, 10.8vw, 60px);
		--tr-heading-section: clamp(38px, 9.8vw, 54px);
		--tr-heading-subsection: clamp(28px, 7.2vw, 38px);
		--tr-heading-large: clamp(30px, 8vw, 42px);
		--tr-heading-card: clamp(21px, 6vw, 27px);
		--tr-heading-small: clamp(18px, 5vw, 22px);
		--tr-text-body: 17px;
		--tr-text-card: 16px;
		--tr-text-ui: 14px;
		--tr-text-label: 11px;
	}
	html[lang^="ar"] {
		--tr-heading-hero: clamp(44px, 11.2vw, 62px);
		--tr-heading-page: clamp(40px, 10.2vw, 57px);
		--tr-heading-section: clamp(36px, 9.2vw, 50px);
		--tr-heading-subsection: clamp(27px, 7vw, 36px);
		--tr-heading-card: clamp(20px, 5.7vw, 26px);
		--tr-heading-small: clamp(18px, 5vw, 22px);
		--tr-line-hero: 1.16;
		--tr-line-page: 1.2;
		--tr-line-heading: 1.26;
		--tr-line-subheading: 1.3;
		--tr-line-body: 1.85;
		--tr-line-card: 1.75;
	}
}