/**
 * Phase 1 — Fluid Arabic typography foundations
 */

/* Cairo: display headlines · IBM Plex Sans Arabic: body/UI */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

html[dir="rtl"] .as-root,
.as-root[dir="rtl"] {
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	line-height: var(--as-leading-normal);
	font-weight: var(--as-weight-regular);
	color: var(--as-text-primary);
	letter-spacing: var(--as-tracking-arabic);
	font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Display */
.as-display-hero {
	font-family: var(--as-font-display);
	font-size: var(--as-text-hero);
	font-weight: var(--as-weight-black);
	line-height: var(--as-leading-tight);
	letter-spacing: var(--as-tracking-arabic);
}

.as-display-xl {
	font-family: var(--as-font-display);
	font-size: var(--as-text-5xl);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-tight);
}

.as-display-lg {
	font-family: var(--as-font-display);
	font-size: var(--as-text-4xl);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-tight);
}

/* Headings */
.as-heading-1 {
	font-family: var(--as-font-display);
	font-size: var(--as-text-3xl);
	font-weight: var(--as-weight-bold);
	line-height: var(--as-leading-snug);
}

.as-heading-2 {
	font-family: var(--as-font-display);
	font-size: var(--as-text-2xl);
	font-weight: var(--as-weight-semibold);
	line-height: var(--as-leading-snug);
}

.as-heading-3 {
	font-family: var(--as-font-display);
	font-size: var(--as-text-xl);
	font-weight: var(--as-weight-semibold);
	line-height: var(--as-leading-snug);
}

/* Body */
.as-body-lg {
	font-size: var(--as-text-lg);
	line-height: var(--as-leading-relaxed);
	color: var(--as-text-secondary);
}

.as-body-md {
	font-size: var(--as-text-md);
	line-height: var(--as-leading-normal);
	color: var(--as-text-secondary);
}

.as-body-sm {
	font-size: var(--as-text-sm);
	line-height: var(--as-leading-normal);
	color: var(--as-text-muted);
}

/* Labels & UI */
.as-label {
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-semibold);
	line-height: 1.4;
	color: var(--as-text-muted);
	text-transform: none;
	letter-spacing: var(--as-tracking-wide);
}

.as-kicker {
	font-family: var(--as-font-display);
	font-size: var(--as-text-xs);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-tracking-wide);
	color: var(--as-accent-primary);
	text-transform: none;
}

/* Metrics — LTR numerals in RTL shell */
.as-metric,
.as-metric-value {
	font-family: var(--as-font-mono);
	font-variant-numeric: tabular-nums lining-nums;
	direction: ltr;
	unicode-bidi: isolate;
	letter-spacing: var(--as-tracking-tight);
}

.as-metric-value {
	font-size: var(--as-text-3xl);
	font-weight: var(--as-weight-bold);
	color: var(--as-text-primary);
}

.as-metric-delta--up {
	color: var(--as-accent-growth);
}

.as-metric-delta--down {
	color: var(--as-color-danger-500);
}

/* Latin brand lockup inside Arabic UI */
.as-latin,
[lang="en"] {
	font-family: "IBM Plex Sans", var(--as-font-body);
}