/* ============================================================================ tokens.css — زبان بصری گارنت مرجع: D4 §۳ — هویت از wwwroot/img/logo.png (یاقوت روی سیاه) سبک: دقت جواهری (Faceted Precision) قاعده‌ی سخت: هیچ رنگ، فاصله یا اندازه‌ای در فایل‌های دیگر به‌صورت خام نوشته نمی‌شود. همه از این متغیرها می‌آیند. تم تاریک فقط پنل، ادمین و ورود. صفحات عمومی data-theme="light" اجباری دارند. ========================================================================= */ :root { color-scheme: light; /* ── برند — پرکننده، مشترک هر دو تم ─────────────────────────────────── */ --brand-navy: #0F172A; --on-brand: #FFFFFF; --brand-primary: #C41A4F; --brand-primary-hover: #9B123E; --brand-primary-d: var(--brand-primary-hover); /* سازگاری با CSS قبلی */ --brand-magenta: #E84A7A; --brand-teal: #00D4AA; --brand-amber: #F5A524; --brand-danger: #E5484D; /* ── سطوح روشن — خنثای سرد سازمانی (گارنت‌اپ) ──────────────────────── */ --bg-app: #F6F7FB; --bg-surface: #FFFFFF; --bg-muted: #F1F2F7; --bg-elevated: #FFFFFF; --border: #E4E6EF; --border-strong: #CBD0DC; --text: #1A1D2B; --text-muted: #475569; --text-subtle: #6B7280; --text-invert: #FFFFFF; --brand-primary-text: #9B123E; --brand-primary-soft: #F8E8EE; --overlay: rgba(15, 23, 42, 0.45); /* جدول گارنت — جداسازی با سطح، نه با کنتراست سنگین */ --table-head-bg: #ECEEF3; --table-head-fg: var(--text-muted); --table-head-shine: transparent; --table-facet: rgba(196, 26, 79, 0.22); --table-stripe: #F0F0F0; --table-card-bg: #F0F0F0; --table-hover: var(--brand-primary-soft); --table-line: var(--border); /* نمودار گجت داشبورد */ --chart-bar-from: var(--brand-navy); --chart-bar-to: var(--brand-primary); /* گجت KPI — هر کارت پالت خودش را دارد (الگوی Mercury / قالب‌های پریمیوم) */ --gadget-fg: rgba(255, 255, 255, .96); --gadget-muted: rgba(255, 255, 255, .62); --gadget-icon-well: rgba(255, 255, 255, .12); --gadget-edge: rgba(255, 255, 255, .16); --wash-garnet: rgba(196, 26, 79, .55); --wash-teal: rgba(0, 212, 170, .40); --wash-amber: rgba(245, 165, 36, .40); --wash-indigo: rgba(99, 102, 241, .42); --wash-danger: rgba(229, 72, 77, .42); --wash-slate: rgba(255, 255, 255, .18); --gadget-issued-from: #8C1443; --gadget-issued-to: #4A1230; --gadget-active-from: #0E5C4C; --gadget-active-to: #0E4A3C; --gadget-amber-from: #8C5811; --gadget-amber-to: #5C3D10; --gadget-plan-from: #2E3F72; --gadget-plan-to: #1E2C50; --gadget-slate-from: #2E3B52; --gadget-slate-to: #263452; --gadget-indigo-from: #4A3FA8; --gadget-indigo-to: #2A2270; --gadget-mesh: rgba(255, 255, 255, .045); /* کروم ادمین همیشه روی navy است — مستقل از تم صفحه */ --chrome-fg: rgba(255, 255, 255, .85); --chrome-muted: rgba(255, 255, 255, .35); --chrome-hover: rgba(255, 255, 255, .08); /* ── وضعیت گارانتی — fill تزئینی؛ fg برای متن (کنتراست AA) ─────────── */ --status-active: var(--brand-teal); --status-active-fg: #027A63; --status-active-bg: rgba(0, 212, 170, .12); --status-expiring: var(--brand-amber); --status-expiring-fg: #96590A; --status-expiring-bg: rgba(245, 165, 36, .14); --status-expired: var(--text-muted); --status-expired-fg: var(--text-muted); --status-expired-bg: var(--bg-muted); --status-void: var(--brand-danger); --status-void-fg: #B02A2E; --status-void-bg: rgba(229, 72, 77, .12); --status-not-started: #6366F1; --status-not-started-fg: #4348C0; --status-not-started-bg: rgba(99, 102, 241, .12); --status-returned: var(--brand-magenta); --status-returned-fg: #A6295A; --status-returned-bg: rgba(232, 74, 122, .14); --danger-soft: rgba(229, 72, 77, .08); --danger-border: rgba(229, 72, 77, .35); --warning-soft: rgba(245, 165, 36, .14); --warning-border: rgba(245, 165, 36, .40); /* ورودی — چاهک، متمایز از سطح کارت سفید */ --input-bg: #E7E9F0; --input-border: #B4BAC8; --input-inset: inset 0 1px 2px rgba(15, 23, 42, .06); --focus-ring: 0 0 0 3px var(--brand-primary-soft); /* ── شکل — دقت جواهری: گوشه کوتاه، نه کپسول نرم ─────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 4px 16px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); /* ── اندازه‌های چیدمان ────────────────────────────────────────────────── */ --tap: 44px; /* ارتفاع کنترل روی دسکتاپ (۹۹۲px+) — جایی که ماوس/تاچ‌پد دقت کافی دارد و ۴۴px فقط فرم‌ها را بی‌دلیل کش می‌دهد. */ --tap-lg: 36px; --header-h: 56px; --tabbar-h: 56px; --rail-w: 64px; --sidebar-w: 260px; --drawer-w: 480px; /* ── فاصله ────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ── تایپوگرافی ─────────────────────────────────────────────────────── پایه روی موبایل ۱۶px است. کمتر از آن، iOS هنگام فوکوس روی ورودی خودکار زوم می‌کند — D4 §۲. */ --font-body: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-base: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --lh-tight: 1.35; --lh-body: 1.75; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --transition: 160ms ease; } /* ── تم تاریک — فقط وقتی html[data-theme="dark"] است ───────────────────── */ [data-theme="dark"] { color-scheme: dark; /* سرمه‌ای شیشه‌ای — هم‌خانواده با garnetapp.ir و نمونهٔ UI-Templates */ --bg-app: #0B0F1A; --bg-surface: #111827; --bg-muted: #1E293B; --bg-elevated: #1E293B; --border: #334155; --border-strong: #475569; --text: #F8FAFC; --text-muted: #94A3B8; --text-subtle: #64748B; --text-invert: #0B0F1A; --brand-primary-text: #F2C4CC; --brand-primary-hover: #E05A78; --brand-primary-d: var(--brand-primary-hover); --brand-primary-soft: rgba(196, 26, 79, 0.22); --overlay: rgba(11, 15, 26, 0.72); --status-active-fg: #5EE9C5; --status-expiring-fg: #F5C56B; --status-expired-fg: var(--text-muted); --status-void-fg: #F08083; --status-not-started-fg: #A5A8FF; --status-returned-fg: #F0A0C0; --danger-soft: rgba(229, 72, 77, .16); --danger-border: rgba(240, 128, 131, .45); --warning-soft: rgba(245, 165, 36, .16); --warning-border: rgba(245, 197, 107, .45); --input-bg: #0B1220; --input-border: var(--border-strong); --input-inset: inset 0 1px 2px rgba(0, 0, 0, .35); --focus-ring: 0 0 0 3px var(--brand-primary-soft); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 10px 32px rgba(0, 0, 0, .40); --shadow-lg: 0 28px 56px rgba(0, 0, 0, .50); --table-head-bg: #1E293B; --table-head-fg: var(--text-muted); --table-head-shine: transparent; --table-facet: rgba(196, 26, 79, 0.35); --table-stripe: rgba(255, 255, 255, .04); --table-card-bg: #1A2233; --table-hover: rgba(196, 26, 79, 0.14); --table-line: var(--border); --chart-bar-from: #4A1028; --chart-bar-to: var(--brand-magenta); --gadget-issued-from: #A31C56; --gadget-issued-to: #5C1638; --gadget-active-from: #128064; --gadget-active-to: #0E5040; --gadget-amber-from: #A6690F; --gadget-amber-to: #603F12; --gadget-plan-from: #364C8A; --gadget-plan-to: #223256; --gadget-slate-from: #35456A; --gadget-slate-to: #2A3A5C; --gadget-indigo-from: #5B4CC4; --gadget-indigo-to: #322870; } @media (min-width: 992px) { :root { --fs-base: 14px; --fs-sm: 13px; } } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } } /* ============================================================================ نقاط شکست — D4 §۲ طراحی از xs شروع می‌شود و به بالا گسترش می‌یابد (Mobile-First). هیچ CSSای با max-width نوشته نشود مگر برای چاپ. xs ≤ ۵۷۵ موبایل تک‌ستونه + نوار پایین sm ۵۷۶–۷۶۷ موبایل بزرگ / تبلت کوچک تک‌ستونه + نوار پایین md ۷۶۸–۹۹۱ تبلت عمودی تک‌ستونه + منوی کشویی lg ۹۹۲–۱۲۷۹ تبلت افقی، سرفیس ریل آیکنی ۶۴px + دو ستون xl ≥ ۱۲۸۰ دسکتاپ نوار کناری کامل ۲۴۰px ========================================================================= */