/*
 * Index Brands — design tokens.
 *
 * Every value here comes from §0 of the build spec. Nothing outside that list
 * belongs in this file, and no stylesheet in the plugin writes a raw hex where a
 * token exists: a colour that only appears once still gets a name, because the
 * next screen that needs it has to reach the same value.
 *
 * Scoped to .index-brand so the directory's palette never leaks into the theme's
 * own chrome, and so a brand colour on a card cannot reach the site navigation.
 */

.index-brand {
	/* --- Colour, §0 --------------------------------------------------- */
	--bg: #FBFBF9;
	--bg-alt: #F8F7F6;
	--ink: #0B3B2E;
	--ink-2: #2E4A40;
	--muted: #4E6158;
	--faint: #8A9587;
	--faint-2: #B9C2B6;
	--border: #E2E4D9;
	--border-soft: #EFEFE7;
	--border-dash: #C9D6BE;
	--green-soft: #E9F5E6;
	--green-ink: #1F6B4F;
	--grey-soft: #F1F1EA;
	--lime: #C8F135;
	--lime-soft: #E9F8BC;
	--lime-border: #DCEFA6;
	--lime-bg: #F1F5DF;
	--lime-bg-2: #F4F8ED;
	--sale-dark: #12513D;
	--warn-text: #8A5A22;
	--warn-bg: #FDF5E3;
	--warn-border: #F0E2BE;
	--warn-icon: #C08A2E;
	--error: #C4562F;
	--error-border: #D89A82;
	--verified-blue: #1565F5;

	/* --- Typography, §0 ------------------------------------------------ */
	--font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

	--fs-hero: 40px;          /* → 62px at 700px */
	--fs-h2: 26px;
	--fs-card-title: 17px;
	--fs-body: 15px;
	--fs-meta: 13px;
	--fs-eyebrow: 11.5px;

	--ls-hero: -0.03em;
	--ls-h2: -0.02em;
	--ls-eyebrow: 0.12em;

	--lh-body: 1.65;

	/* --- Geometry, §0 -------------------------------------------------- */
	--r-card: 20px;
	--r-card-lg: 24px;
	--r-field: 14px;
	--r-tile: 14px;
	--r-pill: 999px;

	--h-btn: 52px;
	--h-btn-sm: 44px;
	--h-chip: 40px;
	--h-field: 54px;
	--h-search: 66px;

	/* The one motion curve. Card hover is the only place it is spent. */
	--ease: cubic-bezier(.2, .7, .2, 1);
	--t-card: .36s;

	/* --- Layout -------------------------------------------------------- */
	--container: 1280px;
	--container-editor: 1320px;
	--gap-grid: 14px;
	--sidebar-profile: 320px;
	--sidebar-editor: 268px;

	/* --- Per-brand, §0 -------------------------------------------------
	 * Set inline per card or per page from the brand's own colour. The ink is
	 * computed, never chosen: white only where it clears 3.4:1.
	 */
	--brand: var(--ink);
	--brand-ink: #ffffff;
}

@media (min-width: 700px) {
	.index-brand {
		--fs-hero: 62px;
		--fs-h2: 27px;
	}
}

/* --- Primitives every screen shares ------------------------------------ */

/*
 * Latin inside Arabic. A domain, an email or a URL dropped bare into an RTL
 * paragraph reorders — an `@` written before a domain renders after it — so
 * every one of them is printed through Domain::isolate() into this class.
 */
.index-brand .ib-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/*
 * Digits stay Latin at all times: 47%, never ٤٧٪. Locking the numeric font
 * feature stops a UI font from substituting Arabic-Indic forms inside RTL text.
 */
.index-brand {
	font-variant-numeric: lining-nums tabular-nums;
	-moz-font-feature-settings: 'lnum' 1;
	font-feature-settings: 'lnum' 1;
}

.index-brand {
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
}

.index-brand *,
.index-brand *::before,
.index-brand *::after {
	box-sizing: border-box;
}

/* Card hover, §0 geometry. */
.index-brand .ib-card {
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	background: #fff;
	transition: transform var(--t-card) var(--ease), border-color .2s ease;
}

.index-brand .ib-card:hover {
	transform: translateY(-4px);
	border-color: #D6D9CB;
}

@media (prefers-reduced-motion: reduce) {
	.index-brand .ib-card {
		transition: border-color .2s ease;
	}

	.index-brand .ib-card:hover {
		transform: none;
	}
}

/* Touch targets never fall below 44px, §9. */
.index-brand button,
.index-brand .ib-btn,
.index-brand .ib-chip {
	min-height: var(--h-btn-sm);
	font-family: inherit;
}

/* No horizontal scrolling at any width, §9. */
.index-brand {
	overflow-x: clip;
}

.index-brand .ib-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 18px;
}

@media (min-width: 700px) {
	.index-brand .ib-container {
		padding-inline: 30px;
	}
}

@media (min-width: 1080px) {
	.index-brand .ib-container {
		padding-inline: 44px;
	}
}

/* iOS zooms a focused field under 16px; the spec's field sizes stay visual. */
@media (max-width: 619px) {
	.index-brand input,
	.index-brand textarea,
	.index-brand select {
		font-size: 16px;
	}
}