/* ========================================================================== VStore Ecosystem — Design Tokens سیستم توکن مرکزی: هر رنگ فقط اینجا تعریف می‌شود. 3 پالت گرم × 2 حالت (روشن گرم / تیره گرم) — با data-palette و data-theme روی سند مرجع: بخش 6 (پالت مینیمال RTL) و بخش 8 (فرانت مشتری) ========================================================================== */ :root { /* ---- تایپوگرافی ---- */ --font-sans: 'Estedad', 'Vazirmatn', 'IRANSansX', 'IRANSans', Tahoma, system-ui, sans-serif; --font-num: 'Estedad', 'Vazirmatn', Tahoma, system-ui, sans-serif; --fs-11: 0.6875rem; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem; --fs-48: 3rem; --lh-tight: 1.35; --lh-body: 1.85; --lh-loose: 2; /* ---- فاصله‌گذاری (مقیاس 4) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* ---- شعاع گوشه (نامتقارن و خلاقانه) ---- */ --r-xs: 0.375rem; --r-sm: 0.625rem; --r-md: 1rem; --r-lg: 1.375rem; --r-xl: 1.875rem; --r-pill: 999px; --r-leaf: 1.75rem 0.5rem 1.75rem 0.5rem; --r-blob: 62% 38% 46% 54% / 47% 55% 45% 53%; /* ---- لایه‌ها و حرکت ---- */ --z-base: 1; --z-sticky: 40; --z-drawer: 60; --z-modal: 80; --z-toast: 100; --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-back: cubic-bezier(0.18, 1.28, 0.4, 1); /* ---- چیدمان ---- */ --site-max: 1240px; --panel-sidebar: 264px; --header-h: 72px; /* ---- رنگ‌های معنایی مشتق‌شده (از پالت فعال ساخته می‌شوند) ---- */ --brand-soft: color-mix(in oklab, var(--brand) 13%, var(--surface)); --brand-line: color-mix(in oklab, var(--brand) 34%, var(--line)); --brand-2-soft: color-mix(in oklab, var(--brand-2) 16%, var(--surface)); --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface)); --ok-soft: color-mix(in oklab, var(--ok) 15%, var(--surface)); --warn-soft: color-mix(in oklab, var(--warn) 16%, var(--surface)); --danger-soft: color-mix(in oklab, var(--danger) 14%, var(--surface)); --info-soft: color-mix(in oklab, var(--info) 14%, var(--surface)); --overlay: color-mix(in oklab, var(--ink) 52%, transparent); --shadow-color: color-mix(in oklab, var(--shadow-base) 22%, transparent); --shadow-sm: 0 1px 2px var(--shadow-color), 0 4px 10px -6px var(--shadow-color); --shadow-md: 0 2px 6px var(--shadow-color), 0 14px 30px -18px var(--shadow-color); --shadow-lg: 0 8px 20px -10px var(--shadow-color), 0 30px 60px -30px var(--shadow-color); --shadow-glow: 0 18px 45px -22px color-mix(in oklab, var(--brand) 70%, transparent); /* ---- چیپ‌های رنگی گرم (فرمت‌ها: AI/EPS/SVG/PSD و ...) ---- */ --c1: var(--brand); --c2: var(--brand-2); --c3: var(--accent); --c4: var(--warn); --c5: var(--ok); --c6: var(--accent-2, var(--accent)); } /* ========================================================================== 1) پالت «زعفران و غروب» — پیش‌فرض ========================================================================== */ [data-palette='saffron'] { --bg: #fff8f1; --bg-tint: #fdf0e3; --surface: #fffdfa; --surface-2: #fbf1e7; --surface-3: #f7e8da; --ink: #2a1b13; --ink-2: #7a5a47; --ink-3: #a98e7c; --line: #eedcc9; --line-strong: #dfc5ab; --brand: #e8590c; --brand-2: #f2a007; --brand-ink: #ffffff; --accent: #0e7490; --accent-2: #7d9b4f; --accent-ink: #ffffff; --ok: #3f7d4e; --warn: #b4760a; --danger: #d6453d; --info: #0e7490; --shadow-base: #7a4a22; --grad-brand: linear-gradient(135deg, #f2a007 0%, #f97316 48%, #e8590c 100%); --grad-hero: linear-gradient(140deg, #fff6ec 0%, #ffe8d2 46%, #ffdcc8 100%); --grad-band: linear-gradient(120deg, #fdf0e3 0%, #fff8f1 60%, #ffeede 100%); --grad-sidebar: linear-gradient(180deg, #2a1b13 0%, #3d2418 55%, #5a3016 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand-2) 42%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 70%); } [data-palette='saffron'][data-theme='dark'] { --bg: #191110; --bg-tint: #201614; --surface: #241a17; --surface-2: #2c201c; --surface-3: #362622; --ink: #fbefe6; --ink-2: #c7aa97; --ink-3: #9c8271; --line: #3b2a24; --line-strong: #52392f; --brand: #fb923c; --brand-2: #fbbf24; --brand-ink: #26140a; --accent: #2dd4bf; --accent-2: #a3c46a; --accent-ink: #06231f; --ok: #6cc08a; --warn: #e5a93c; --danger: #f87171; --info: #4dd0e1; --shadow-base: #000000; --grad-brand: linear-gradient(135deg, #fbbf24 0%, #fb923c 50%, #f0616a 100%); --grad-hero: linear-gradient(140deg, #231614 0%, #2f1d18 55%, #3d2419 100%); --grad-band: linear-gradient(120deg, #1f1513 0%, #251a17 60%, #2c1d18 100%); --grad-sidebar: linear-gradient(180deg, #1c1311 0%, #2a1a15 55%, #3a2216 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 70%); } /* ========================================================================== 2) پالت «کارامل و دارچین» ========================================================================== */ [data-palette='caramel'] { --bg: #fbf3e9; --bg-tint: #f6e9d8; --surface: #fffdf8; --surface-2: #f8efe1; --surface-3: #f2e3d0; --ink: #2b1f18; --ink-2: #6f594a; --ink-3: #9d8676; --line: #e8d6c1; --line-strong: #d9bfa2; --brand: #c1743a; --brand-2: #e8b04b; --brand-ink: #ffffff; --accent: #3f6c51; --accent-2: #7d9b4f; --accent-ink: #ffffff; --ok: #3f6c51; --warn: #b07d18; --danger: #c0392b; --info: #4a6fa5; --shadow-base: #6b4520; --grad-brand: linear-gradient(135deg, #e8b04b 0%, #c1743a 55%, #8c4a1e 100%); --grad-hero: linear-gradient(140deg, #fdf6ea 0%, #f4e3c8 48%, #eed7b4 100%); --grad-band: linear-gradient(120deg, #f6e9d8 0%, #fbf3e9 60%, #f3e2ca 100%); --grad-sidebar: linear-gradient(180deg, #241811 0%, #35221a 55%, #4d2e1c 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 70%); } [data-palette='caramel'][data-theme='dark'] { --bg: #1e1512; --bg-tint: #251b16; --surface: #2a1d18; --surface-2: #33241d; --surface-3: #3d2c23; --ink: #f7ebdd; --ink-2: #c3a894; --ink-3: #9b8170; --line: #463227; --line-strong: #5c4133; --brand: #e8b04b; --brand-2: #c1743a; --brand-ink: #241408; --accent: #7fb69a; --accent-2: #a9c37a; --accent-ink: #0c2318; --ok: #7fb69a; --warn: #d8a33f; --danger: #e07a6b; --info: #86a8d6; --shadow-base: #000000; --grad-brand: linear-gradient(135deg, #f0c46b 0%, #d08a47 55%, #9a552a 100%); --grad-hero: linear-gradient(140deg, #221812 0%, #2e2018 55%, #3b281c 100%); --grad-band: linear-gradient(120deg, #241a15 0%, #2a1d18 60%, #33231b 100%); --grad-sidebar: linear-gradient(180deg, #1f1611 0%, #2d1f18 55%, #452b1a 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--brand-2) 20%, transparent), transparent 70%); } /* ========================================================================== 3) پالت «گل‌محمدی و هلو» ========================================================================== */ [data-palette='rose'] { --bg: #fff5f0; --bg-tint: #fdeae3; --surface: #fffbfa; --surface-2: #fcefea; --surface-3: #f8e1d9; --ink: #331a22; --ink-2: #7e5f68; --ink-3: #ad8f97; --line: #f3d9d2; --line-strong: #e8c2b9; --brand: #e14b62; --brand-2: #ff7a59; --brand-ink: #ffffff; --accent: #6b2d4f; --accent-2: #7a9a4f; --accent-ink: #ffffff; --ok: #5c8a51; --warn: #c07a1a; --danger: #a02c2c; --info: #6b2d4f; --shadow-base: #8c3b4a; --grad-brand: linear-gradient(135deg, #ff7a59 0%, #e14b62 55%, #6b2d4f 100%); --grad-hero: linear-gradient(140deg, #fff3ee 0%, #ffe2da 46%, #ffd6d2 100%); --grad-band: linear-gradient(120deg, #fdeae3 0%, #fff5f0 60%, #fbe3dd 100%); --grad-sidebar: linear-gradient(180deg, #2b1720 0%, #43202c 55%, #63273c 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%); } [data-palette='rose'][data-theme='dark'] { --bg: #1f1418; --bg-tint: #271820; --surface: #2a1a20; --surface-2: #35222a; --surface-3: #3f2a33; --ink: #fdeef1; --ink-2: #cda9b4; --ink-3: #a68190; --line: #452a34; --line-strong: #5c3843; --brand: #ff8ba0; --brand-2: #ff9e7a; --brand-ink: #2a1119; --accent: #d8a0c2; --accent-2: #a9c37a; --accent-ink: #2c1224; --ok: #8cc47d; --warn: #e0aa4a; --danger: #f0736b; --info: #d8a0c2; --shadow-base: #000000; --grad-brand: linear-gradient(135deg, #ff9e7a 0%, #e14b62 55%, #8c3a63 100%); --grad-hero: linear-gradient(140deg, #241419 0%, #30191f 55%, #3d1e26 100%); --grad-band: linear-gradient(120deg, #251720 0%, #2a1a20 60%, #33202a 100%); --grad-sidebar: linear-gradient(180deg, #221419 0%, #33191f 55%, #4c2030 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%); } /* پالت پیش‌فرض اگر هیچ data-palette ست نشده باشد */ html:not([data-palette]) { --bg: #fff8f1; --bg-tint: #fdf0e3; --surface: #fffdfa; --surface-2: #fbf1e7; --surface-3: #f7e8da; --ink: #2a1b13; --ink-2: #7a5a47; --ink-3: #a98e7c; --line: #eedcc9; --line-strong: #dfc5ab; --brand: #e8590c; --brand-2: #f2a007; --brand-ink: #ffffff; --accent: #0e7490; --accent-2: #7d9b4f; --accent-ink: #ffffff; --ok: #3f7d4e; --warn: #b4760a; --danger: #d6453d; --info: #0e7490; --shadow-base: #7a4a22; --grad-brand: linear-gradient(135deg, #f2a007 0%, #f97316 48%, #e8590c 100%); --grad-hero: linear-gradient(140deg, #fff6ec 0%, #ffe8d2 46%, #ffdcc8 100%); --grad-band: linear-gradient(120deg, #fdf0e3 0%, #fff8f1 60%, #ffeede 100%); --grad-sidebar: linear-gradient(180deg, #2a1b13 0%, #3d2418 55%, #5a3016 100%); --glow: radial-gradient(58% 58% at 82% 8%, color-mix(in oklab, #f2a007 42%, transparent), transparent 72%); --glow-2: radial-gradient(50% 50% at 8% 92%, color-mix(in oklab, #e8590c 30%, transparent), transparent 70%); }