/* ============================================================= RIMMELA · DESIGN TOKENS یک منبع واحد برای رنگ، فاصله، شعاع، سایه و تایپوگرافی. سوییچ برند فقط با اتریبیوت روی : → صورتی (مصرف‌کننده) → بنفش (تأمین‌کننده / فروشنده) → نیلی (پنل مدیریت) ============================================================= */ @import url('./font.css'); :root { color-scheme: light; /* ===== پالت خنثی ===== */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* ===== رنگ‌های معنایی ===== */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; --success-soft: #ecfdf5; --warning-soft: #fffbeb; --danger-soft: #fef2f2; --info-soft: #eff6ff; /* ===== سطوح ===== */ --bg: var(--gray-50); --surface: #ffffff; --surface-2: var(--gray-100); --border: var(--gray-200); --border-strong: var(--gray-300); --text: var(--gray-900); --text-muted: var(--gray-500); /* ===== تایپوگرافی ===== */ --font-sans: 'YekanBakh', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fs-xs: .75rem; --fs-sm: .875rem; --fs-base:1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; /* ===== شعاع گوشه ===== */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full:999px; /* ===== سایه ===== */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow: 0 4px 14px rgba(15,23,42,.08); --shadow-lg: 0 12px 34px rgba(15,23,42,.12); /* ===== ابعاد چیدمان پنل ===== */ --sidebar-w: 264px; --sidebar-w-collapsed: 78px; --topbar-h: 68px; /* ===== حرکت ===== */ --transition: .25s cubic-bezier(.4, 0, .2, 1); /* ===== برند پیش‌فرض = مصرف‌کننده (صورتی) ===== */ --brand: #ec4899; --brand-600: #db2777; --brand-700: #be185d; --brand-soft: #fdf2f8; --brand-contrast: #ffffff; --brand-rgb: 236, 72, 153; } /* ===== تم مصرف‌کننده · صورتی ===== */ :root[data-brand="consumer"] { --brand: #ec4899; --brand-600: #db2777; --brand-700: #be185d; --brand-soft: #fdf2f8; --brand-rgb: 236, 72, 153; } /* ===== تم تأمین‌کننده / فروشنده · بنفش ===== */ :root[data-brand="supplier"] { --brand: #8b5cf6; --brand-600: #7c3aed; --brand-700: #6d28d9; --brand-soft: #f5f3ff; --brand-rgb: 139, 92, 246; } /* ===== تم مدیریت · نیلی ===== */ :root[data-brand="admin"] { --brand: #4f46e5; --brand-600: #4338ca; --brand-700: #3730a3; --brand-soft: #eef2ff; --brand-rgb: 79, 70, 229; } /* ============================================================= RESET پایه ============================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-weight: 400; background: var(--bg); color: var(--text); direction: rtl; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } img { max-width: 100%; display: block; } ul { list-style: none; } ::selection { background: rgba(var(--brand-rgb), .18); } /* اسکرول‌بار نازک و برندشده */ * { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* ============================================================= UI PRIMITIVES مشترک (دکمه، کارت، بج، چیپ) ============================================================= */ /* --- دکمه‌ها --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; line-height: 1; transition: var(--transition); white-space: nowrap; } .btn-brand { background: var(--brand); color: var(--brand-contrast); box-shadow: 0 6px 18px rgba(var(--brand-rgb), .35); } .btn-brand:hover { background: var(--brand-600); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--brand-600); box-shadow: inset 0 0 0 1.5px var(--brand); } .btn-outline:hover { background: var(--brand-soft); } .btn-ghost { background: var(--surface-2); color: var(--text); } .btn-ghost:hover { background: var(--gray-200); } .btn-danger { background: var(--danger-soft); color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-block { width: 100%; } .btn-sm { padding: .45rem .9rem; font-size: var(--fs-xs); } /* --- کارت --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-pad { padding: 1.5rem; } /* --- بج وضعیت --- */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; } .badge-brand { background: var(--brand-soft); color: var(--brand-700); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: #b45309; } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } /* --- کمک‌کننده‌ها --- */ .text-brand { color: var(--brand-600); } .text-muted { color: var(--text-muted); } .hidden { display: none !important; }