/* ── توکن‌های طراحی برند پاداشیان ───────────────────────────── تنها جای مجاز برای تعریف رنگ. هیچ فایل دیگری رنگ hard-code نمی‌کند. دو لایه: ۱) پالت برند (ثابت، مستقل از تم) ۲) توکن‌های معنایی (بین تم تیره/روشن سوییچ می‌شوند) تم با اتریبیوت data-theme روی عوض می‌شود — فقط مقدار متغیرها تغییر می‌کند، هیچ کامپوننت یا چیدمانی تکرار نمی‌شود. */ :root { /* ── پالت برند ── */ --graphite-950: #05070d; --graphite-900: #0b1220; --graphite-800: #16233a; --titanium-500: #8a8f98; --titanium-300: #c7c9ce; --titanium-200: #e4e4e7; --titanium-100: #f0f0f1; --signal-white: #fafafa; --ion-500: #3b6ef6; /* رنگ اصلی — در هر دو تم یکسان */ --ion-600: #2952c8; /* ── شعاع و چیدمان ── */ --radius-pill: 999px; --radius-card: 16px; --section-gap: clamp(4rem, 9vw, 7.5rem); --container-max: 1200px; /* ── تایپوگرافی ── */ --font-fa: 'Vazirmatn', Tahoma, sans-serif; --font-latin: 'Inter', 'Vazirmatn', sans-serif; /* ── توکن‌های معنایی — تم روشن (پیش‌فرض) ── */ --bg: var(--signal-white); --bg-soft: var(--titanium-100); --surface: #ffffff; --border: var(--titanium-200); --text: var(--graphite-950); --text-soft: var(--graphite-800); --text-muted: var(--titanium-500); --header-bg: rgba(250, 250, 250, 0.85); --card-shadow: 0 10px 30px rgba(5, 7, 13, 0.06); --card-shadow-hover: 0 16px 44px rgba(5, 7, 13, 0.10); } :root[data-theme="dark"] { --bg: var(--graphite-950); --bg-soft: var(--graphite-900); --surface: var(--graphite-900); --border: var(--graphite-800); --text: var(--signal-white); --text-soft: var(--titanium-300); --text-muted: var(--titanium-500); --header-bg: rgba(5, 7, 13, 0.82); --card-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --card-shadow-hover: 0 18px 50px rgba(59, 110, 246, 0.14); }