/*
 * 1.16.0 — HAYKALA | هيكلة, the master brand lockup.
 *
 * WHAT THIS FILE IS
 * -----------------
 * Typography and optical balance for the markup Resolve\Core\Brand prints.
 * It defines no colour of its own: every colour below is an existing design
 * token (--resolve-*), and those tokens are what Super Admin → Design tokens
 * already edits. A colour change made there reaches the lockup with no new
 * control.
 *
 * TYPEFACES (prompt §4, §5)
 * -------------------------
 * HAYKALA — Cormorant Garamond SemiBold (SIL Open Font License 1.1, bundled in
 *   assets/fonts with its licence). The PANACEA wordmark's own typeface is
 *   not in the project's assets and no licence for it was supplied, so it is
 *   NOT reproduced; Cormorant Garamond is the closest openly licensed face to
 *   its high-contrast, sharp-serifed, wide-capital character.
 * هيكلة — Noto Naskh Arabic Medium (SIL OFL 1.1, bundled; SemiBold is
 *   bundled too). Both were rendered beside the Latin at 3x: SemiBold read
 *   visibly heavier than the Latin's hairline-and-stem contrast, Medium
 *   matched its colour on the page. Naskh letterforms are optically larger than Latin
 *   capitals at the same font-size, so the Arabic is set at 0.84em and
 *   lifted by a hair to share the Latin's visual centre line.
 *
 * Every optical value is a custom property, so it can be adjusted in one
 * place. The platform had no typography controls before this release (fonts
 * were named in stylesheets only) and none was added: font, size and weight
 * remain stylesheet-level, which is reported as an open item rather than
 * solved with a new branding control the brief did not authorise.
 */

@font-face {
	font-family: "HAYKALA Serif";
	src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "HAYKALA Serif";
	src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "HAYKALA Naskh";
	src: url("../fonts/noto-naskh-arabic-arabic-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

@font-face {
	font-family: "HAYKALA Naskh";
	src: url("../fonts/noto-naskh-arabic-arabic-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

:root {
	--hk-latin-font: "HAYKALA Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--hk-latin-weight: 600;
	--hk-latin-tracking: 0.06em;
	--hk-ar-font: "HAYKALA Naskh", "Noto Naskh Arabic", "Amiri", serif;
	--hk-ar-weight: 500;
	--hk-ar-scale: 0.84em;
	--hk-ar-shift: -0.02em;
	--hk-sep-scale: 0.86em;
	--hk-sep-gap: 0.32em;
	--hk-sep-color: var(--resolve-accent, #5A68C4);
	--hk-name-color: var(--resolve-ink, #181818);
	--hk-tagline-color: var(--resolve-ink-2, #3c4653);
	--hk-managed-color: var(--resolve-ink-3, #515b68);
	--hk-tagline-size: 0.8125rem;
	--hk-managed-size: 0.75rem;
}

/* --- the three parts --------------------------------------------------- */

.hk-lockup {
	display: inline-flex;
	align-items: baseline;
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
	line-height: 1.1;
	color: var(--hk-name-color);
	font-size: inherit;
}

.hk-latin {
	font-family: var(--hk-latin-font);
	font-weight: var(--hk-latin-weight);
	letter-spacing: var(--hk-latin-tracking);
	/* Tracking is added after the last letter too; take it back so the
	   separator is centred between the two words. */
	margin-inline-end: calc(var(--hk-latin-tracking) * -1);
}

.hk-sep {
	font-family: var(--hk-latin-font);
	font-weight: 500;
	font-size: var(--hk-sep-scale);
	color: var(--hk-sep-color);
	/* The lockup is always laid out left to right, so physical margins are
	   correct here. Naskh carries more side bearing than the Latin capitals,
	   so the gap before the Arabic is taken in slightly to look equal. */
	margin: 0 calc(var(--hk-sep-gap) * 0.82) 0 calc(var(--hk-sep-gap) * 1.06);
	position: relative;
	top: -0.04em;
}

.hk-ar {
	font-family: var(--hk-ar-font);
	font-weight: var(--hk-ar-weight);
	font-size: var(--hk-ar-scale);
	letter-spacing: 0;
	position: relative;
	top: var(--hk-ar-shift);
}

/* --- the stacked lockup: brand, tagline, attribution -------------------- */

.hk-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
	min-width: 0;
	max-width: 100%;
}

.hk-brand__name { font-size: 1.5rem; line-height: 1.1; }
.hk-brand--sm .hk-brand__name { font-size: 1.25rem; }
.hk-brand--lg .hk-brand__name { font-size: 1.875rem; }
.hk-brand--xl .hk-brand__name { font-size: clamp(1.875rem, 4vw, 2.75rem); }

.hk-tagline {
	font-family: var(--resolve-sans, sans-serif);
	font-size: var(--hk-tagline-size);
	font-weight: 500;
	line-height: 1.35;
	color: var(--hk-tagline-color);
	overflow-wrap: anywhere;
}

.hk-managed {
	font-family: var(--resolve-sans, sans-serif);
	font-size: var(--hk-managed-size);
	line-height: 1.4;
	color: var(--hk-managed-color);
	display: inline-block;
}

.hk-managed__name {
	direction: ltr;
	unicode-bidi: isolate;
	font-weight: 600;
	white-space: nowrap;
}

/* Centre-aligned placements (sign-in, a document cover). */
.hk-brand--center { align-items: center; text-align: center; }

/* --- on a dark ground ---------------------------------------------------- */

.hk-on-dark {
	--hk-name-color: var(--resolve-on-dark, #CCD9FB);
	--hk-sep-color: var(--resolve-brand, #8493E6);
	--hk-tagline-color: var(--resolve-on-dark, #CCD9FB);
	--hk-managed-color: #AEB9D9;
}

/* --- small screens: scale, never break the lockup (§19) ----------------- */

@media (max-width: 480px) {
	.hk-brand__name { font-size: 1.25rem; }
	.hk-brand--lg .hk-brand__name, .hk-brand--xl .hk-brand__name { font-size: 1.5rem; }
	.hk-tagline { font-size: 0.75rem; }
	.hk-managed { font-size: 0.6875rem; }
}

@media (max-width: 360px) {
	.hk-brand__name { font-size: 1.0625rem; }
}

@media print {
	.hk-on-dark {
		--hk-name-color: #181818;
		--hk-sep-color: #5A68C4;
		--hk-tagline-color: #3c4653;
		--hk-managed-color: #515b68;
	}
}