/*
 * Design tokens (README "The design system"). oklch values are authoritative; the
 * neutrals' low chroma is deliberate warmth read off her studio backdrops — never
 * normalise them to pure greys or hex.
 *
 * Components use the semantic tokens (--samira-ground, --samira-text, …). Dark mode
 * and the inverted (ink) sections only remap those; hues never change.
 */

:root {
	color-scheme: light dark;

	/* Palette, light theme. */
	--samira-ink: oklch(0.19 0.012 40);
	--samira-berry: oklch(0.45 0.155 6);
	--samira-paper: oklch(0.958 0.007 75);
	--samira-shell: oklch(0.94 0.007 75);
	--samira-stone: oklch(0.86 0.008 75);

	/* Semantic tokens, light theme. */
	--samira-ground: var(--samira-paper);
	--samira-raised: var(--samira-shell);
	--samira-image-ground: var(--samira-stone);
	--samira-hairline: oklch(0.84 0.01 70);
	--samira-hairline-strong: oklch(0.82 0.01 70);
	--samira-text: var(--samira-ink);
	--samira-body: oklch(0.34 0.012 50);
	--samira-lead: oklch(0.31 0.012 50);
	--samira-muted: oklch(0.5 0.012 60);
	--samira-rail-text: oklch(0.52 0.012 60);
	--samira-accent: var(--samira-berry);
	--samira-underline: oklch(0.72 0.012 65);
	--samira-button-ground: var(--samira-ink);
	--samira-button-text: var(--samira-paper);

	/* Inverted (ink ground) sections in the light theme: Screen, Contact, marquee, featured card. */
	--samira-inverted-ground: var(--samira-ink);
	--samira-inverted-text: var(--samira-paper);
	--samira-inverted-body: oklch(0.82 0.01 75);
	--samira-inverted-muted: oklch(0.72 0.015 65);
	--samira-inverted-accent: oklch(0.78 0.1 8);
	--samira-inverted-hairline: oklch(0.32 0.012 48);
	--samira-inverted-underline: oklch(0.42 0.012 54);
	--samira-inverted-button-ground: var(--samira-paper);
	--samira-inverted-button-text: var(--samira-ink);
	--samira-marquee-separator: oklch(0.72 0.09 8);
	--samira-field-accent: oklch(0.68 0.145 8);

	/* Type families. */
	--samira-font-display: var(--wp--preset--font-family--display, "Bodoni Moda", serif);
	--samira-font-text: var(--wp--preset--font-family--text, Archivo, system-ui, sans-serif);
	--samira-font-arabic: var(--wp--preset--font-family--arabic, "Noto Naskh Arabic", serif);
	--samira-font-mono: ui-monospace, menlo, monospace;

	/* Type scale: the README's cqw values against the 1440 artboard, expressed in vw. */
	--samira-size-hero: clamp(54px, 7.6vw, 122px);
	--samira-size-contact: clamp(36px, 6.7vw, 108px);
	--samira-size-screen: clamp(34px, 4.2vw, 68px);
	--samira-size-section: clamp(34px, 4vw, 62px);
	--samira-size-about: clamp(32px, 3.4vw, 54px);
	--samira-size-process: clamp(30px, 3.2vw, 50px);
	--samira-size-pullquote: clamp(26px, 2.7vw, 42px);
	--samira-size-vertical: clamp(24px, 2.3vw, 36px);
	--samira-size-quote: clamp(22px, 2.1vw, 30px);
	--samira-size-email: clamp(20px, 2.9vw, 44px);

	/* Spacing. */
	--samira-page-margin: 56px;
	--samira-rail-width: 150px;
	--samira-rail-gutter: 28px;
	--samira-rail-padding: 20px;

	/* Desktop header (1a): 22px padding ×2, 32.5px CTA, 1px hairline. */
	--samira-header-height: 77.5px;
}

@media (max-width: 899.98px) {

	:root {
		--samira-page-margin: 20px;
		--samira-header-height: 48px;
	}
}

@media (prefers-color-scheme: dark) {

	:root {
		--samira-ground: oklch(0.16 0.012 40);
		--samira-raised: oklch(0.21 0.012 42);
		--samira-image-ground: oklch(0.26 0.012 45);
		--samira-hairline: oklch(0.32 0.012 48);
		--samira-hairline-strong: oklch(0.32 0.012 48);
		--samira-text: oklch(0.93 0.008 78);
		--samira-body: oklch(0.84 0.01 76);
		--samira-lead: oklch(0.84 0.01 76);
		--samira-muted: oklch(0.7 0.012 64);
		--samira-rail-text: oklch(0.7 0.012 64);
		--samira-accent: oklch(0.68 0.145 8);
		--samira-underline: oklch(0.4 0.012 52);
		--samira-button-ground: oklch(0.93 0.008 78);
		--samira-button-text: oklch(0.16 0.012 40);

		--samira-inverted-ground: oklch(0.21 0.012 42);
		--samira-inverted-text: oklch(0.93 0.008 78);
		--samira-inverted-body: oklch(0.84 0.01 76);
		--samira-inverted-muted: oklch(0.7 0.012 64);
		--samira-inverted-accent: oklch(0.68 0.145 8);
		--samira-inverted-hairline: oklch(0.32 0.012 48);
		--samira-inverted-underline: oklch(0.4 0.012 52);
		--samira-inverted-button-ground: oklch(0.93 0.008 78);
		--samira-inverted-button-text: oklch(0.16 0.012 40);
		--samira-marquee-separator: oklch(0.68 0.145 8);
	}
}

/* Inverted sections swap the semantic tokens for their ink-ground values. */
.samira-inverted {
	--samira-ground: var(--samira-inverted-ground);
	--samira-text: var(--samira-inverted-text);
	--samira-body: var(--samira-inverted-body);
	--samira-lead: var(--samira-inverted-body);
	--samira-muted: var(--samira-inverted-muted);
	--samira-rail-text: var(--samira-inverted-muted);
	--samira-accent: var(--samira-inverted-accent);
	--samira-hairline: var(--samira-inverted-hairline);
	--samira-hairline-strong: var(--samira-inverted-hairline);
	--samira-underline: var(--samira-inverted-underline);
	--samira-button-ground: var(--samira-inverted-button-ground);
	--samira-button-text: var(--samira-inverted-button-text);
}

/*
 * Arabic pages (inc/i18n): Noto Naskh Arabic joins every stack as the fallback face, so Arabic
 * glyphs render in Naskh while Latin letters, prices and codes keep Bodoni and Archivo.
 */
html[lang="ar"] {
	--samira-font-display: "Bodoni Moda", "Noto Naskh Arabic", serif;
	--samira-font-text: "Archivo", "Noto Naskh Arabic", system-ui, sans-serif;
}