/* =================================================================
   File:    02-typography.css
   Purpose: Type scale, base body styles, headings, links. Uses tokens
            from 01-variables.css. Arabic font is swapped automatically
            on RTL pages via [dir="rtl"].
   ================================================================= */

html {
	font-family: var(--ff-sans);
	font-size: 16px;
	color: var(--c-ink);
	background: var(--c-surface-0);
}

[dir="rtl"] html,
html[dir="rtl"],
body[dir="rtl"],
.rtl body {
	font-family: var(--ff-arabic);
}

body {
	font-family: inherit;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-ink);
	/* Layered bg: vertical "behind-header" gradient band at the top that
	   fades smoothly to transparent at its bottom edge, over the base page
	   color. Because the gradient's own bottom stop is `transparent 100%`,
	   the edge where the bg image ends has zero alpha — so the boundary
	   between band and base is invisible. No hard line. */
	background-color: var(--c-surface-0);
	background-image: linear-gradient(
		180deg,
		var(--header-band-c1, rgba(154, 122, 64, 0.16)) 0%,
		var(--header-band-c2, rgba(184, 146, 76, 0.09)) 35%,
		transparent 100%
	);
	background-attachment: fixed;
	background-repeat:    no-repeat;
	background-size:      100% var(--header-band-height, 600px);
	background-position:  top center;
	-webkit-font-smoothing: antialiased;
}

/* Headings */
h1, .h1 { font-family: var(--ff-display); font-size: var(--fs-xxl); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2, .h2 { font-family: var(--ff-display); font-size: var(--fs-xl); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-md);  font-weight: var(--fw-semi);   line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--fs-base);font-weight: var(--fw-semi);   line-height: var(--lh-snug); }
h6, .h6 { font-size: var(--fs-sm);  font-weight: var(--fw-semi);   text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-muted); }

.eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.display {
	font-size: var(--fs-display);
	font-family: var(--ff-display);
	font-weight: var(--fw-semi);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

/* Paragraphs + body text */
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

small, .text-small { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.text-muted  { color: var(--c-ink-muted); }
.text-soft   { color: var(--c-ink-soft); }

/* Links */
a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-accent-2); }
a:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Lists (when not role="list") */
ul, ol { padding-inline-start: 1.4em; margin: 0 0 var(--space-4); }
li + li { margin-top: var(--space-1); }

/* Code */
code, kbd, pre, samp {
	font-family: var(--ff-mono);
	font-size: 0.9em;
}
code {
	background: var(--c-surface-2);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
}
pre {
	background: var(--c-surface-2);
	padding: var(--space-4);
	border-radius: var(--radius);
	overflow-x: auto;
}

/* Selection */
::selection { background: color-mix(in oklab, var(--c-accent) 30%, transparent); color: var(--c-ink); }

/* Blockquote */
blockquote {
	border-inline-start: 3px solid var(--c-accent);
	padding-inline-start: var(--space-4);
	color: var(--c-ink-muted);
	font-style: italic;
}