/* ========================================================================== Design Tokens — مشترک بین همه‌ی صفحات (لاگین، داشبورد، ...) این فایل باید همیشه قبل از سایر فایل‌های CSS پروژه لود بشه. ========================================================================== */ /* ---------- فونت‌ها (لوکال، بدون CDN) ---------- */ @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn/Vazirmatn-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* ---------- توکن‌های رنگ / تایپ / فاصله ---------- */ :root { color-scheme: light; --ink-900: #1c2536; --ink-700: #384258; --steel-500: #64708a; --steel-300: #94a0b8; --steel-100: #eef1f6; --paper-100: #ffffff; --paper-200: #f6f8fb; --blue-500: #3576e0; --blue-600: #2a63c4; --blue-050: #eaf1fd; --amber-500: #f5a623; --green-500: #1fa66a; --red-500: #d64545; --red-050: #fbeaea; /* رنگ‌های نشان‌گر وضعیت — پیش‌تر مقادیر هگز ثابت در قالب‌ها تکرار می‌شدند؛ توکن‌سازی‌شان اجازه می‌دهد در تم تیره یک‌جا بازتعریف شوند. */ --green-050: #e7f7ef; /* پس‌زمینه‌ی نشان «موفق/جدید» */ --amber-050: #fef3e2; /* پس‌زمینه‌ی نشان «هشدار» */ --amber-200: #f0d9b0; /* حاشیه‌ی نشان «هشدار» */ --amber-700: #b3720f; /* متن «هشدار» */ --info-050: #e8f1fd; /* پس‌زمینه‌ی نشان «اطلاع» */ /* پالت نمودارها — الهام از سبک بنتو رنگارنگ، فقط داخل چارت‌ها استفاده می‌شود */ --chart-purple: #7c6ff0; --chart-purple-soft: #d9d5fb; --chart-green: #2ec27e; --chart-green-soft: #cdf2e2; --chart-orange: #ff9f5a; --chart-orange-soft: #ffe4cf; --chart-pink: #f06595; --chart-pink-soft: #fbd9e6; --chart-blue: #4c8dff; --chart-blue-soft: #dbe8ff; --font-ui: "Vazirmatn", Tahoma, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --radius-pill: 999px; } /* ========================================================================== تم تیره — فقط توکن‌ها بازتعریف می‌شوند؛ بقیه‌ی سایت چون از همین توکن‌ها استفاده می‌کند خودکار همراه می‌شود. صفت data-theme را اسکریپت کوچکِ ابتدای پیش از اولین رنگ‌آمیزی روی می‌گذارد (بدون پرش رنگ). ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --ink-900: #e8ecf4; --ink-700: #bcc5d6; --steel-500: #96a2b9; --steel-300: #69748a; --steel-100: #2b3446; --paper-100: #171e2c; --paper-200: #0f1420; --blue-500: #5091f5; --blue-600: #6ea3f7; --blue-050: #17233c; --amber-500: #f0b23f; --green-500: #45c78d; --red-500: #ef6a6e; --red-050: #38211f; --green-050: #14322a; --amber-050: #322611; --amber-200: #55471f; --amber-700: #e0a850; --info-050: #17273f; /* سطوحی که بعضی کامپوننت‌های Bootstrap مستقیم از آن‌ها رنگ می‌گیرند */ --bs-body-bg: #0f1420; --bs-body-color: #e8ecf4; --bs-border-color: #2b3446; --bs-secondary-bg: #171e2c; --bs-tertiary-bg: #1c2434; --bs-emphasis-color: #e8ecf4; } :root[data-theme="dark"] body { background: var(--paper-200); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); color: var(--ink-900); } /* ---------- دسترس‌پذیری: فوکوس قابل مشاهده در کل سایت ---------- */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }