/*
 * Design tokens — Shamasy's visual contract.
 * The palette comes from the brand: the leaf green of the logo, a sun amber
 * accent (the site sells شماسي — sunshades), warm paper surfaces and a deep
 * garden-green ink. Change values here, nowhere else.
 */

:root {
	/* ---- Colour ---- */
	--color-canvas: #fdfcf8;
	--color-ink: #212b18;
	--color-muted: #67705c;
	--color-line: #dcded2;
	--color-hairline: color-mix(in srgb, var(--color-ink) 10%, transparent);
	--color-hairline-strong: color-mix(in srgb, var(--color-ink) 24%, transparent);

	--color-leaf: #83b735;
	--color-leaf-deep: #5e8f1e;
	--color-leaf-tint: #eef4e1;
	--color-amber: #fbbc34;
	--color-amber-tint: #fdf3dc;

	--color-panel: #f4f5ec;
	--color-panel-deep: #e8ebdb;
	--color-forest: #24371b;
	--color-forest-deep: #1a2913;
	--color-on-forest: #f2f5ea;

	--color-focus: #5e8f1e;
	--color-error: #a63d2f;

	/* ---- Typography ---- */
	--font-sans: "Alexandria", "Segoe UI", Tahoma, system-ui, sans-serif;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--text-display: clamp(2.2rem, 5vw, 3.6rem);
	--text-display--line-height: 1.25;

	--text-h2: clamp(1.6rem, 3.2vw, 2.4rem);
	--text-h2--line-height: 1.35;

	--text-h3: clamp(1.15rem, 2vw, 1.4rem);
	--text-h3--line-height: 1.4;

	--text-body: 1.0625rem;
	--text-body--line-height: 1.9;

	--text-small: 0.9375rem;
	--text-small--line-height: 1.7;

	--text-eyebrow: 0.8125rem;
	--text-eyebrow--line-height: 1.3;
	--text-eyebrow--letter-spacing: 0.02em;

	/* ---- Space ---- */
	--space-section: clamp(4rem, 8vw, 7.5rem);
	--space-section-tight: clamp(2.75rem, 5.5vw, 5rem);
	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--width-shell: 82rem;
	--width-narrow: 46rem;
	--header-height: 4.75rem;

	/* ---- Radius ---- */
	--radius-sm: 0.625rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-full: 9999px;

	/* ---- Elevation ---- */
	--shadow-card:
		0 1px 2px -1px color-mix(in srgb, var(--color-ink) 8%, transparent),
		0 6px 16px -12px color-mix(in srgb, var(--color-ink) 18%, transparent);
	--shadow-card-lifted:
		0 2px 4px -2px color-mix(in srgb, var(--color-ink) 10%, transparent),
		0 10px 24px -14px color-mix(in srgb, var(--color-ink) 22%, transparent),
		0 26px 48px -28px color-mix(in srgb, var(--color-ink) 30%, transparent);
	--shadow-drawer: 0 0 60px color-mix(in srgb, var(--color-ink) 16%, transparent);
	--shadow-float: 0 8px 24px -8px color-mix(in srgb, var(--color-forest) 45%, transparent);

	/* ---- Motion ---- */
	--ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 0.18s;
	--duration-base: 0.3s;
	--duration-slow: 0.55s;
}

/* ------------------------------------------------------------------ *
 * Alexandria, self-hosted, variable 300–700. Arabic leads; the Latin
 * subsets carry prices, numerals and the odd English word.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "Alexandria";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/alexandria-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
		U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
		U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "Alexandria";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/alexandria-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Alexandria";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/alexandria-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
		U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}