/* ==========================================================================
   01 — Design tokens (هویت بصری تک نخل)
   رنگ‌ها مستقیماً از لوگو و سند برند گرفته شده‌اند.
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/Vazirmatn[wght].woff2") format("woff2-variations"),
	     url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn[wght].woff2") format("woff2-variations");
}

:root {
	/* Brand */
	--green: #07552B;        /* سبز اصلی — هویت برند */
	--green-deep: #063D21;   /* سبز تیره */
	--green-2: #0F6B36;      /* سبز برگ (تُن روشن‌تر برای جزئیات) */
	--green-soft: #E6EFE5;   /* پس‌زمینه سبز بسیار روشن */
	--gold: #C99A27;         /* طلایی — دکمه‌ها و تأکید */
	--gold-light: #E8C66A;
	--gold-soft: #F6EBCB;
	--brown: #683A20;        /* قهوه‌ای خرمایی */
	--date: #9A3B19;         /* رنگ دانه خرما (از لوگو) */
	--cream: #F8F3E8;        /* پس‌زمینه */
	--cream-2: #F1E8D5;
	--white: #FFFFFF;
	--ink: #292D25;          /* متن اصلی */
	--ink-2: #4B5046;
	--muted: #7A7C70;
	--line: #E6DDC9;
	--line-2: #D7CBB0;

	--ok: #2F7D3A;
	--err: #B42318;
	--err-soft: #FDECEA;

	/* Type */
	--font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
	--fs-xs: .78rem;
	--fs-sm: .875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
	--fs-2xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	--fs-3xl: clamp(2rem, 1.3rem + 3.4vw, 3.6rem);

	/* Space & shape */
	--gutter: 16px;
	--container: 1240px;
	--sec: clamp(56px, 8vw, 112px);
	--r-xs: 8px;
	--r-sm: 12px;
	--r: 18px;
	--r-lg: 26px;
	--r-xl: 36px;
	--r-pill: 999px;

	/* Elevation — سایه‌ها سبک و گرم */
	--sh-1: 0 1px 2px rgba(41, 45, 37, .05), 0 2px 10px rgba(41, 45, 37, .04);
	--sh-2: 0 12px 32px -14px rgba(6, 61, 33, .22);
	--sh-3: 0 30px 60px -28px rgba(6, 61, 33, .35);

	/* Motion */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--t: .3s;

	--topbar-h: 36px;
	--header-h: 64px;
	--tabbar-h: 64px;
	--z-header: 50;
	--z-drawer: 90;
	--z-modal: 100;
	--z-toast: 120;
}

@media (min-width: 768px) {
	:root { --gutter: 24px; --header-h: 76px; }
}