/* ============================================================ دیزاین سیستم زیرمجموعه‌ها | لایه ۱: توکن‌ها (Design Tokens) ------------------------------------------------------------ این فایل هیچ کامپوننتی تعریف نمی‌کند. فقط «مقدارهای پایه»: رنگ، فونت، فاصله، شعاع، سایه، لایه، حرکت، بریک‌پوینت. هر فایل CSS دیگری فقط از var(--hz-*) استفاده می‌کند و هیچ‌وقت مقدار خام (hex / px) نمی‌نویسد. ترتیب لود: hz-tokens.css → hz-components.css → .css ⚠ رنگ برند اینجا «پیش‌فرضِ جای‌خالی» است. رنگ واقعی هر کسب‌وکار از تنظیمات اولیه‌ی ERP (کلید store.brand_color) می‌آید و صفحه آن را به‌صورت inline روی می‌نشاند. یعنی این عددها را برای عوض کردن برند دست نزن — تنظیمات را پر کن. ============================================================ */ /* ============================================================ ۱. رنگ — نردبان‌های خام (Color ramps) این‌ها مستقیم در کامپوننت استفاده نمی‌شوند؛ همیشه از توکن‌های معنایی بخش ۲ استفاده کن. ============================================================ */ :root { /* برند — پیش‌فرض تا وقتی store.brand_color پر شود */ --hz-brand-50: #ecfeff; --hz-brand-100: #cffafe; --hz-brand-200: #a5f3fc; --hz-brand-300: #67e8f9; --hz-brand-400: #22d3ee; --hz-brand-500: #06b6d4; --hz-brand-600: #0e7490; --hz-brand-700: #155e75; /* ★ پایه‌ی برند — ۷.۰:۱ روی سفید */ --hz-brand-800: #164e63; --hz-brand-900: #083344; /* لهجه — کهربایی. فقط سطح، هرگز رنگِ متن روی سفید. */ --hz-amber-50: #fffbeb; --hz-amber-100: #fef3c7; --hz-amber-200: #fde68a; --hz-amber-300: #fcd34d; --hz-amber-400: #fbbf24; --hz-amber-500: #f59e0b; /* ★ لهجه — فقط سطح */ --hz-amber-600: #d97706; --hz-amber-700: #b45309; /* ★ نسخه‌ی متنی، ۴.۹:۱ روی سفید */ --hz-amber-800: #92400e; --hz-amber-900: #78350f; /* خاکستری خنثی */ --hz-gray-0: #ffffff; --hz-gray-50: #f8fafc; --hz-gray-100: #f1f5f9; --hz-gray-200: #e2e8f0; --hz-gray-300: #cbd5e1; --hz-gray-400: #94a3b8; --hz-gray-500: #64748b; --hz-gray-600: #475569; --hz-gray-700: #334155; --hz-gray-800: #1e293b; --hz-gray-900: #0f172a; /* وضعیت */ --hz-green-50: #f0fdf4; --hz-green-600: #16a34a; --hz-green-700: #15803d; --hz-red-50: #fef2f2; --hz-red-600: #dc2626; --hz-red-700: #b91c1c; --hz-orange-50: #fff7ed; --hz-orange-600:#ea580c; } /* ============================================================ ۲. رنگ — توکن‌های معنایی (Semantic tokens) قاعده‌ی ثابت: هر رنگِ پس‌زمینه یک جفت --hz-on-* دارد که رنگِ متنِ روی آن است. هیچ‌وقت خودت حدس نزن. ============================================================ */ :root { color-scheme: light; /* برند. --hz-brand را PHP از store.brand_color بازنویسی می‌کند؛ بقیه از همان مشتق می‌شوند تا با عوض شدنِ یک عدد، همه‌جا عوض شود. */ --hz-brand: var(--hz-brand-700); --hz-primary: var(--hz-brand); --hz-primary-hover: var(--hz-brand-800); --hz-primary-active: var(--hz-brand-900); --hz-primary-soft: var(--hz-brand-50); --hz-primary-border: var(--hz-brand-200); --hz-on-primary: #ffffff; /* لهجه */ --hz-accent: var(--hz-amber-500); --hz-accent-hover: var(--hz-amber-600); --hz-accent-soft: var(--hz-amber-50); --hz-accent-border: var(--hz-amber-200); --hz-on-accent: var(--hz-gray-900); /* ⚠ متن تیره روی کهربایی */ --hz-accent-text: var(--hz-amber-700); /* ⚠ برای *متنِ* کهربایی روی سفید */ /* متن — سه پله، نه بیشتر. تأکید از وزن می‌آید نه از رنگ. */ --hz-ink: var(--hz-gray-900); --hz-muted: var(--hz-gray-600); --hz-ink-disabled: var(--hz-gray-400); --hz-ink-inverse: #ffffff; /* سطح‌ها */ --hz-bg: var(--hz-gray-0); --hz-surface: var(--hz-gray-0); --hz-surface-soft: var(--hz-gray-50); --hz-surface-sunken: var(--hz-gray-100); --hz-surface-hover: var(--hz-gray-50); --hz-surface-dark: var(--hz-gray-900); /* خط و مرز */ --hz-line: var(--hz-gray-200); --hz-line-strong: var(--hz-gray-300); --hz-line-subtle: var(--hz-gray-100); /* وضعیت */ --hz-success: var(--hz-green-600); --hz-success-soft: var(--hz-green-50); --hz-danger: var(--hz-red-600); --hz-danger-soft: var(--hz-red-50); --hz-warning: var(--hz-orange-600); --hz-warning-soft: var(--hz-orange-50); --hz-on-status: #ffffff; /* حلقه‌ی فوکوس — هرگز outline:none بدون جایگزین */ --hz-focus: var(--hz-brand-500); --hz-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hz-focus) 35%, transparent); } /* ============================================================ ۳. تایپوگرافی فونت وزیرمتن، هم‌مبدأ. ⚠ هیچ منبع بیرونی مجاز نیست (نه گوگل‌فونت، نه CDN خارجی): اینترنتِ بین‌الملل ممکن است قطع باشد و صفحه نباید به آن گره بخورد. فایل‌ها را در /assets/fonts/ بگذار. ⚠ وزن ۸۰۰ عمداً هست: بدونش مرورگر ۷۰۰ را مصنوعی چاق می‌کند. ⚠ مسیر فونت‌ها عمداً **نسبی** است، نه مطلق. سایت گاهی روی ریشه‌ی دامنه است و گاهی داخل زیرپوشه (`/hzo/`)؛ مسیر مطلق در حالت دوم ۴۰۴ می‌شود و صفحه بی‌صدا با فونت پیش‌فرض بالا می‌آید. مسیر نسبی نسبت به همین فایل در هر دو حالت درست است. (CSS توکنِ PHP نمی‌فهمد، پس {{BASE}} اینجا جواب نمی‌داد.) ============================================================ */ @font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { --hz-font: "Vazirmatn", "Kalameh", Tahoma, system-ui, sans-serif; /* مقیاس متن — پله‌ها با clamp سیال‌اند تا بین موبایل و دسکتاپ نپرند. عدد وسط‌راه ننویس؛ از همین پله‌ها بردار. */ --hz-text-xs: 0.75rem; --hz-text-sm: 0.875rem; --hz-text-base: 1rem; --hz-text-lg: 1.125rem; --hz-text-xl: clamp(1.15rem, 0.5vw + 1rem, 1.35rem); --hz-text-2xl: clamp(1.35rem, 1vw + 1rem, 1.75rem); --hz-text-3xl: clamp(1.6rem, 1.8vw + 1rem, 2.25rem); --hz-text-4xl: clamp(1.9rem, 3vw + 1rem, 3rem); --hz-leading-tight: 1.35; --hz-leading: 1.75; /* فارسی به فضای سطر بیشتری نیاز دارد */ --hz-weight-normal: 400; --hz-weight-medium: 500; --hz-weight-bold: 700; --hz-weight-black: 800; } /* ============================================================ ۴. فاصله‌گذاری — مقیاس ۴ پیکسلی ============================================================ */ :root { --hz-1: 0.25rem; --hz-2: 0.5rem; --hz-3: 0.75rem; --hz-4: 1rem; --hz-5: 1.25rem; --hz-6: 1.5rem; --hz-8: 2rem; --hz-10: 2.5rem; --hz-12: 3rem; --hz-16: 4rem; --hz-20: 5rem; --hz-24: 6rem; /* فاصله‌ی عمودی بخش‌های صفحه — یک جا، تا ریتم صفحه یکنواخت بماند */ --hz-section-y: clamp(2.5rem, 5vw, 5rem); } /* ============================================================ ۵. شعاع، سایه، لایه، حرکت ============================================================ */ :root { --hz-radius-sm: 6px; --hz-radius: 12px; --hz-radius-lg: 18px; --hz-radius-xl: 28px; --hz-radius-full: 999px; --hz-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --hz-shadow: 0 4px 14px rgba(15, 23, 42, .08); --hz-shadow-lg: 0 12px 34px rgba(15, 23, 42, .12); /* لایه‌ها — یک نردبان، تا z-index تصادفی ننویسیم */ --hz-z-base: 1; --hz-z-sticky: 100; --hz-z-header: 200; --hz-z-drawer: 300; --hz-z-modal: 400; --hz-z-toast: 500; --hz-ease: cubic-bezier(.4, 0, .2, 1); --hz-fast: .15s; --hz-normal: .25s; --hz-slow: .4s; } /* ============================================================ ۶. بریک‌پوینت‌ها و کانتینر — چهار دسته‌ی دستگاه ------------------------------------------------------------ همیشه Mobile-first: حالت پایه موبایل است و @media فقط min-width. ⚠⚠ دو ستون «مجازی» و «واقعی» را قاطی نکن. زیر ۱۰۲۴ زوم نیست، پس واقعی = مجازی. از ۱۰۲۴ واقعی به بالا `zoom: .8` فعال است (بخش ۶.۱) و `zoom` روی مدیا‌کوئری اثر ندارد — یعنی هر بریک‌پوینتِ داخل باند زوم باید ۰٫۸ برابر نوشته شود. | دسته | مجازی | واقعی (در @media) | کانتینر | |-------------|-------|-------------------|---------| | موبایل | ۰ | ۰ | ۱۰۰٪ | | موبایل بزرگ | ۶۴۰ | ۶۴۰ | ۶۰۰ | | تبلت | ۷۶۸ | ۷۶۸ | ۷۲۰ | | لپ‌تاپ | ۱۲۸۰ | ۱۰۲۴ | ۱۲۰۰ | | دسکتاپ | ۱۶۰۰ | ۱۲۸۰ | ۱۴۴۰ | نگاشت برای max-width: ۱۲۷۹ مجازی ≡ ۱۰۲۳ واقعی · ۱۵۹۹ مجازی ≡ ۱۲۷۹ واقعی یعنی تنها عددهای مجاز در همه‌ی فایل‌های این پروژه: min-width: 640 · 768 · 1024 · 1280 max-width: 639 · 767 · 1023 · 1279 ============================================================ */ :root { --hz-container: 100%; --hz-gutter: var(--hz-4); } @media (min-width: 640px) { :root { --hz-container: 600px; --hz-gutter: var(--hz-5); } } @media (min-width: 768px) { :root { --hz-container: 720px; --hz-gutter: var(--hz-6); } } @media (min-width: 1024px) { :root { --hz-container: 1200px; --hz-gutter: var(--hz-8); } } @media (min-width: 1280px) { :root { --hz-container: 1440px; } } /* ============================================================ ۶.۱ مقیاس پایه‌ی دسکتاپ — «زوم ۸۰٪» به‌عنوان پیش‌فرض طراحی ------------------------------------------------------------ ⚠ چرا `zoom` و نه `html { font-size: 80% }`: دومی فقط چیزهای rem را کوچک می‌کند و ده‌ها اندازه‌ی px سر جایشان می‌مانند؛ ضمناً مرورگر برای اندازه‌ی فونت کف دارد. `zoom` px و rem و تصویر و حاشیه را با هم کوچک می‌کند. ⚠ موبایل و تبلت (زیر ۱۰۲۴) عمداً روی ۱۰۰٪ می‌مانند؛ متن ریز روی گوشی خواندنی نیست. ============================================================ */ @media (min-width: 1024px) { :root { zoom: 0.8; } } /* ============================================================ ۷. تم تیره — اختیاری، با data-theme="dark" روی عمداً به prefers-color-scheme وصل نشده تا سایتِ فروشگاهی ناخواسته تیره نشود. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --hz-ink: var(--hz-gray-50); --hz-muted: var(--hz-gray-300); --hz-ink-disabled: var(--hz-gray-500); --hz-bg: #0b1220; --hz-surface: var(--hz-gray-900); --hz-surface-soft: #111c30; --hz-surface-sunken: #0a1120; --hz-surface-hover: #16233b; --hz-line: #1f2c44; --hz-line-strong: #2b3a55; --hz-line-subtle: #16233b; --hz-primary: var(--hz-brand-400); --hz-primary-hover: var(--hz-brand-300); --hz-primary-soft: #0d2b38; --hz-primary-border: #1b4a5c; --hz-on-primary: #05202a; --hz-accent-text: var(--hz-amber-300); } /* ============================================================ ۸. احترام به تنظیمات کاربر ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --hz-fast: 0s; --hz-normal: 0s; --hz-slow: 0s; } }