/* Aïcha War — design tokens */
:root {
	/* Colour */
	--accent: #424bd0;
	--accent-tint: #e6e7f8;
	--accent-on-dark: #9ea3f2;
	--paper: #f5f3ee;
	--ink: #111113;
	--muted: #5f5e66;
	--muted-on-dark: #a3a2aa;
	--rule: #dcd9d1;
	--rule-on-dark: #2a2a2f;
	--error: #b3261e;
	--success: #1e7a46;

	/* Surface-scoped roles (overridden by .surface-*) */
	--bg: var(--paper);
	--fg: var(--ink);
	--fg-2: var(--muted);
	--line: var(--rule);
	--link: var(--accent);
	--btn-bg: var(--ink);
	--btn-fg: var(--paper);

	/* Type */
	--f-display: "PP Mori", "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
	--f-text: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
	--f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--f-pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;

	/* Type scale — one ratio (≈1.25), applied everywhere:
	   h1  page / hero / next project title
	   h2  every section title, results, project index rows
	   h3  item titles (services, steps, cards, contact card, posts)
	   h4  small headings (FAQ questions, prose h3)
	   lead, body, small, label */
	--fs-h1: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);
	--fs-h2: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	--fs-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
	--fs-lead-xl: var(--fs-lead);
	--fs-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
	--fs-small: 0.875rem;
	--fs-label: 0.75rem;
	--fs-display: var(--fs-h1);

	--lh-display: 1;
	--lh-title: 1.06;
	--lh-h3: 1.2;
	--lh-body: 1.6;
	--track-display: -0.04em;
	--track-title: -0.03em;
	--track-label: 0.06em;
	--measure: 64ch;

	/* Space (airy rhythm) */
	--margin: clamp(20px, 5vw, 64px);
	--gutter: clamp(12px, 1.6vw, 24px);
	--space-section: clamp(72px, 9vw, 144px);
	--space-head: clamp(36px, 4vw, 56px);
	--space-block: clamp(40px, 5vw, 80px);
	--space-item: clamp(20px, 2.2vw, 32px);
	--maxw: 1320px;
	--header-h: 72px;

	/* Motion */
	--ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 0.2s;
	--dur: 0.45s;
	--dur-slow: 0.9s;
}

.surface-ink {
	--bg: var(--ink);
	--fg: var(--paper);
	--fg-2: var(--muted-on-dark);
	--line: var(--rule-on-dark);
	--link: var(--accent-on-dark);
	--btn-bg: var(--paper);
	--btn-fg: var(--ink);
}

.surface-accent {
	--bg: #2C3671; /* deep indigo chosen by the client for the closing CTA */
	--fg: var(--paper);
	--fg-2: #dfe1fb;
	--line: rgba(245, 243, 238, 0.28);
	--link: var(--paper);
	--btn-bg: var(--paper);
	--btn-fg: var(--accent);
}

.surface-paper {
	--bg: var(--paper);
	--fg: var(--ink);
	--fg-2: var(--muted);
	--line: var(--rule);
	--link: var(--accent);
	--btn-bg: var(--ink);
	--btn-fg: var(--paper);
}