/** * variables.css - سیستم تم‌پذیری سایت * * نحوه استفاده: * ۱. تغییر تم: به تگ مقدار data-theme="نام-تم" بدهید. * مثال: * * ۲. افزودن تم جدید: در static/css/app/themes/ فایل theme-نام.css بسازید * و متغیرهای مورد نظر را override کنید. فایل را در base.html بعد از * variables.css و قبل از base.css لود کنید. * * ۳. در CSS از var(--color-primary) و سایر متغیرها استفاده کنید. * * عملکرد: بدون تاثیر منفی روی سرعت (متغیرهای CSS سبک و کش‌شونده هستند). */ :root { /* === رنگ‌های اصلی (Primary) - تم نارنجی و سفید === */ --color-primary: #ea580c; --color-primary-dark: #c2410c; --color-primary-darker: #9a3412; --color-primary-light: #f97316; --color-primary-lighter: #fb923c; /* === رنگ تاکید (Accent) === */ --color-accent: #f97316; --color-accent-hover: #ea580c; --color-accent-rgb: 249, 115, 22; /* === متن === */ --color-text: #374151; --color-text-muted: #6b7280; --color-text-dark: #1f2937; --color-heading: #1f2937; --color-on-primary: #ffffff; /* === پس‌زمینه - سفید === */ --color-bg: #ffffff; --color-bg-gray: #fefefe; --color-bg-light: #fffbf7; --color-bg-card: #fff7ed; /* === حاشیه و جداکننده === */ --color-border: #fde8d9; --color-border-light: #fff7ed; --color-border-dark: #fed7aa; --color-border-muted: #fde8d9; /* === گرادیان‌ها - نارنجی === */ --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%); --gradient-primary-webkit: -webkit-linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-lighter) 100%); /* === سایه‌ها === */ --shadow-sm: 0 2px 8px rgba(234, 88, 12, 0.08); --shadow-md: 0 10px 15px rgba(234, 88, 12, 0.06); --shadow-lg: 0 10px 30px rgba(234, 88, 12, 0.1); --shadow-accent: 0 4px 14px rgba(var(--color-accent-rgb), 0.25); /* === فاصله‌ها (Spacing) === */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* === شعاع گوشه (Border Radius) === */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 50px; /* === تایپوگرافی (دو فونت لوکال) === */ /* فونت ساده: منو، متن، دکمه‌ها */ --font-sans: IRANSans, Tahoma, Arial, sans-serif; /* فونت نمایشی: عناوین (h1-h6)، بنر */ --font-display: Lalezar, IRANSans, sans-serif; --font-size-base: 15px; --font-size-sm: 13px; --font-size-lg: 16px; --font-size-xl: 18px; --line-height-base: 1.85; --line-height-tight: 1.5; /* === Transition === */ --transition-fast: 0.2s ease; --transition-base: 0.4s ease-in-out; --transition-slow: 0.5s; }