/* ========================================================================== FireNet — ۰۱ توکن‌ها (نسخهٔ «PasarGuard» — ۲۰۲۶-۰۹-۲۳) مقادیر مستقیماً از توکن‌های خود PasarGuard برداشته شده‌اند (app/static/pgdash/statics/index-*.css → :root و .dark): خاکستری خنثی در تم تیره و آبیِ 216° به‌عنوان رنگ اصلی. مقادیر HSL بدون پوشش hsl() ذخیره می‌شوند تا بتوان با hsl(var(--x) / ) شفافیت گرفت. سه بخش: ۱) توکن‌های ساختاری — سطوح، سایدبار، برند، شکل، ابعاد ۲) پل به Bootstrap — بازنویسی --bs-* تا کامپوننت‌ها خودکار هماهنگ شوند ۳) توکن‌های موروثی — ۵۲ نامی که تمپلیت‌ها ۱۰۱ بار مصرف می‌کنند (نام‌ها تغییرناپذیرند — فقط مقادیر بازکالیبره شده‌اند) قانون همگام‌سازی رنگ برند (fn/README.md §۳): هر رنگ دو فرم HSL + RGB دارد و باید همگام بمانند؛ bg-opacity-* و .fn-action به فرم RGB وابسته‌اند. آبی light 216 46% 40% = 55, 93, 149 hover 216 46% 30% = 41, 69, 112 آبی dark 216 46% 53% = 80, 124, 190 hover 216 41% 49% = 74, 115, 176 سبز 142 76% 36% = 22, 162, 73 سرخ 0 72% 51% = 220, 40, 40 ========================================================================== */ /* ========================================================================== ۱) توکن‌های ساختاری — تم روشن ========================================================================== */ :root { color-scheme: light; /* --- سطوح --- */ --fn-background: 240 5% 96%; --fn-foreground: 240 5% 10%; --fn-card: 240 5% 98%; --fn-muted: 240 5% 90%; --fn-muted-foreground: 240 5% 40%; --fn-border: 240 5% 80%; --fn-input: 240 6% 91%; --fn-input-placeholder: 240 5% 70%; /* --- سایدبار --- در تم روشن سایدبار تیره‌تر از بدنه است (سطح فرورفته)، ولی در تم تیره دقیقاً هم‌سطح بدنه می‌شود و فقط بوردر جدایشان می‌کند. این وارونگی عمدی است و از خود PasarGuard می‌آید. */ --fn-sidebar: 240 5% 90%; --fn-sidebar-foreground: 240 5% 20%; --fn-sidebar-accent: 240 5% 85%; --fn-sidebar-accent-foreground: 240 5% 10%; --fn-sidebar-border: 240 5% 80%; /* --- رنگ اصلی (آبی PasarGuard) --- هر رنگ دو فرم دارد: HSL برای مصرف مستقیم، RGB برای rgba() بوت‌استرپ. این دو باید همگام بمانند — جدول در سربرگ همین فایل. */ --fn-primary: 216 46% 40%; --fn-primary-rgb: 55, 93, 149; --fn-primary-foreground: 240 5% 98%; --fn-primary-hover: 216 46% 30%; --fn-success: 142 76% 36%; --fn-success-rgb: 22, 162, 73; --fn-danger: 0 72% 51%; --fn-danger-rgb: 220, 40, 40; --fn-warning: 38 92% 50%; --fn-warning-rgb: 245, 158, 11; --fn-info: 199 89% 48%; --fn-info-rgb: 14, 165, 233; --fn-ring: var(--fn-primary); /* --- شکل --- سایهٔ یک‌پلهٔ خیلی ملایم: در تم روشن کارت را از پس‌زمینه جدا می‌کند، در تم تیره تقریباً محسوس نیست و فقط بوردر کار می‌کند (سبک تخت). */ --fn-radius: 0.5rem; --fn-radius-sm: calc(var(--fn-radius) - 2px); --fn-radius-lg: calc(var(--fn-radius) + 4px); --fn-card-shadow: 0 1px 2px hsl(240 4% 8% / 0.05), 0 1px 3px hsl(240 4% 8% / 0.04); /* --- ابعاد اسکلت --- */ --fn-sidebar-width: 16rem; --fn-sidebar-width-icon: 4.25rem; --fn-topbar-height: 3.5rem; --fn-content-max: 1600px; /* فاصلهٔ عناصر sticky از بالای صفحه: زیر lg تاپ‌بار داریم، بالای lg نه (مقدار دسکتاپ در 03-layout.css صفر می‌شود). */ --fn-sticky-top: var(--fn-topbar-height); } /* ========================================================================== ۲) پل به Bootstrap بوت‌استرپ ۵.۳ همهٔ کامپوننت‌هایش را از این متغیرها می‌خواند. با بازنویسی آن‌ها، هر .card / .btn / .table / .modal / .dropdown در هر ۱۱ تمپلیت دیزاین جدید را بدون ویرایش مارک‌آپ می‌گیرد. ========================================================================== */ :root { --bs-body-bg: hsl(var(--fn-background)); --bs-body-color: hsl(var(--fn-foreground)); --bs-emphasis-color: hsl(var(--fn-foreground)); --bs-secondary-color: hsl(var(--fn-muted-foreground)); --bs-secondary-bg: hsl(var(--fn-muted)); --bs-tertiary-bg: hsl(var(--fn-card)); --bs-border-color: hsl(var(--fn-border)); --bs-heading-color: hsl(var(--fn-foreground)); --bs-border-radius: var(--fn-radius); --bs-border-radius-sm: var(--fn-radius-sm); --bs-border-radius-lg: var(--fn-radius-lg); --bs-border-radius-xl: var(--fn-radius-lg); --bs-primary: hsl(var(--fn-primary)); --bs-primary-rgb: var(--fn-primary-rgb); --bs-success: hsl(var(--fn-success)); --bs-success-rgb: var(--fn-success-rgb); --bs-danger: hsl(var(--fn-danger)); --bs-danger-rgb: var(--fn-danger-rgb); --bs-warning: hsl(var(--fn-warning)); --bs-warning-rgb: var(--fn-warning-rgb); --bs-info: hsl(var(--fn-info)); --bs-info-rgb: var(--fn-info-rgb); --bs-link-color: hsl(var(--fn-primary)); --bs-link-hover-color: hsl(var(--fn-primary-hover)); --bs-focus-ring-color: hsl(var(--fn-ring) / 0.25); } /* ========================================================================== ۳) توکن‌های معنایی موروثی تمپلیت‌ها ۱۰۱ بار مستقیماً به این نام‌ها ارجاع می‌دهند. نام‌ها تغییرناپذیرند؛ فقط مقادیر روی مقیاس جدید بازکالیبره شده‌اند. ========================================================================== */ :root { /* سطوح و حاشیه‌ها */ --fn-raised-bg: hsl(var(--fn-card)); --fn-tint-bg: hsl(var(--fn-foreground) / 0.035); --fn-hover-tint: hsl(var(--fn-foreground) / 0.05); --fn-border-soft: hsl(var(--fn-border)); --fn-border-strong: hsl(var(--fn-border) / 0.75); /* جفت‌های معنایی (سطح / متن / حاشیه) */ --fn-brand-bg: hsl(var(--fn-primary) / 0.10); --fn-brand-fg: hsl(var(--fn-primary)); --fn-violet-bg: hsl(var(--fn-primary) / 0.12); --fn-violet-fg: hsl(var(--fn-primary)); --fn-violet-line: hsl(var(--fn-primary) / 0.35); --fn-plum-bg: hsl(262 83% 74% / 0.16); --fn-plum-fg: #59359a; --fn-plum-line: hsl(262 83% 74% / 0.32); --fn-blue-bg: #dbeafe; --fn-blue-fg: #1d4ed8; --fn-blue-line: #bfdbfe; --fn-cyan-bg: #cff4fc; --fn-cyan-fg: #055160; --fn-cyan-line: #b6effb; --fn-green-bg: #d1fae5; --fn-green-fg: #065f46; --fn-green-line: #a7f3d0; --fn-mint-bg: #f0fdf4; --fn-mint-fg: #166534; --fn-mint-line: #bbf7d0; --fn-amber-bg: #fef3c7; --fn-amber-fg: #d97706; --fn-warn-bg: #fff3cd; --fn-warn-line: #ffecb5; --fn-orange-bg: #fff7ed; --fn-orange-fg: #9a3412; --fn-orange-line: #fed7aa; --fn-orange-deep: #7c2d12; --fn-red-bg: #fee2e2; --fn-red-fg: #991b1b; --fn-red-line: #fecaca; --fn-green-bright: hsl(var(--fn-success)); /* چیپ خنثی */ --fn-neutral-chip-bg: hsl(var(--fn-muted)); --fn-neutral-chip-fg: hsl(var(--fn-foreground) / 0.8); /* پس‌زمینهٔ کارت‌های «انتخاب‌شده» در فرم‌ها */ --fn-sel-primary: hsl(var(--fn-primary) / 0.06); --fn-sel-info: hsl(var(--fn-info) / 0.06); --fn-sel-warning: hsl(var(--fn-warning) / 0.08); --fn-sel-danger: hsl(var(--fn-danger) / 0.06); --fn-sel-success: hsl(var(--fn-success) / 0.06); /* متن‌های خنثی */ --fn-text-strong: hsl(var(--fn-foreground)); --fn-text-muted: hsl(var(--fn-muted-foreground)); /* این پنج مورد در base.html قدیمی مصرف می‌شدند و باید بمانند */ --fn-body-bg: hsl(var(--fn-background)); --fn-card-bg: hsl(var(--fn-card)); --fn-card-header-border: hsl(var(--fn-border)); --fn-navbar-bg: hsl(var(--fn-card)); --fn-navbar-border: hsl(var(--fn-border)); --fn-nav-link: hsl(var(--fn-muted-foreground)); } /* ========================================================================== تم تیره — خاکستری خنثی PasarGuard با accent آبی ========================================================================== */ [data-bs-theme="dark"] { color-scheme: dark; /* --- ساختاری --- عیناً .dark پاسارگارد: بدنه و کارت تقریباً هم‌سطح‌اند و فقط بوردر جدایشان می‌کند (سبک تخت). */ --fn-background: 240 2% 11%; --fn-foreground: 0 0% 98%; --fn-card: 240 2% 11.5%; --fn-muted: 0 0% 14.9%; --fn-muted-foreground: 0 0% 63.9%; --fn-border: 0 0% 18%; --fn-input: 240 2% 16.5%; --fn-input-placeholder: 0 0% 38%; --fn-sidebar: 240 2% 10%; --fn-sidebar-foreground: 0 0% 71%; --fn-sidebar-accent: 240 4% 16%; --fn-sidebar-accent-foreground: 0 0% 98%; --fn-sidebar-border: 0 0% 18%; --fn-primary: 216 46% 53%; --fn-primary-rgb: 80, 124, 190; --fn-primary-foreground: 0 0% 100%; --fn-primary-hover: 216 41% 49%; /* --- موروثی: هگزهای روشن در تم تیره به سطوح شفاف تبدیل می‌شوند تا مثل «شیر سفید» روی کارت تیره ننشسند --- */ --fn-violet-bg: hsl(216 46% 53% / 0.18); --fn-violet-fg: #9dbbe6; --fn-violet-line: hsl(216 46% 53% / 0.35); --fn-plum-bg: hsl(262 83% 74% / 0.16); --fn-plum-fg: #d8b4fe; --fn-plum-line: hsl(262 83% 74% / 0.32); --fn-blue-bg: hsl(217 91% 60% / 0.18); --fn-blue-fg: #93c5fd; --fn-blue-line: hsl(217 91% 60% / 0.35); --fn-cyan-bg: hsl(188 86% 53% / 0.14); --fn-cyan-fg: #67e8f9; --fn-cyan-line: hsl(188 86% 53% / 0.30); --fn-green-bg: hsl(160 84% 39% / 0.15); --fn-green-fg: #6ee7b7; --fn-green-line: hsl(160 84% 39% / 0.35); --fn-mint-bg: hsl(160 84% 39% / 0.10); --fn-mint-fg: #a7f3d0; --fn-mint-line: hsl(160 84% 39% / 0.30); --fn-amber-bg: hsl(38 92% 50% / 0.15); --fn-amber-fg: #fbbf24; --fn-warn-bg: hsl(38 92% 50% / 0.13); --fn-warn-line: hsl(38 92% 50% / 0.35); --fn-orange-bg: hsl(25 95% 53% / 0.12); --fn-orange-fg: #fdba74; --fn-orange-line: hsl(25 95% 53% / 0.35); --fn-orange-deep: #fed7aa; --fn-red-bg: hsl(0 84% 60% / 0.15); --fn-red-fg: #fca5a5; --fn-red-line: hsl(0 84% 60% / 0.35); --fn-tint-bg: hsl(0 0% 100% / 0.045); --fn-hover-tint: hsl(0 0% 100% / 0.06); }