/* توکن‌های سیستم طراحی. * * تنها جایی که مقدار خام رنگ، اندازه و فاصله نوشته می‌شود. * دلیل هر رنگ در static/design/PALETTE.md آمده. * * تم تاریک دو مسیر دارد: ترجیح سیستم، و انتخاب دستی کاربر با * data-theme روی . انتخاب دستی همیشه برنده است. */ :root { /* ---------- رنگ: تم روشن ---------- */ --color-bg: #FAFAF9; --color-surface: #FFFFFF; --color-surface-2: #F1F3F2; --color-surface-3: #E7EAE9; --color-text: #16201E; --color-text-muted: #566461; --color-text-inverse: #F5F8F7; --color-border: #DDE2E0; --color-border-strong: #76837F; --color-primary: #0B7C74; --color-primary-hover: #096860; --color-primary-soft: #E3F2F0; --color-on-primary: #FFFFFF; --color-language: #A8501A; --color-language-surface: #E8833A; --color-language-soft: #FDF1E7; --color-programming: #5A45C8; --color-programming-surface: #6C5CE7; --color-programming-soft: #EFECFD; --color-success: #146C51; --color-success-soft: #E4F3EE; --color-warning: #8A5A00; --color-warning-soft: #FBF1DF; --color-danger: #B4231A; --color-danger-soft: #FCEAE8; --color-code-bg: #16201E; --color-code-text: #E9EEEC; /* ---------- تایپوگرافی ---------- */ --font-sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Vazirmatn", ui-monospace, "Cascadia Code", monospace; /* مقیاس ۱.۲۵ — بزرگ‌ترین اندازه با clamp واکنش‌گراست */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); --text-4xl: clamp(2.3rem, 1.5rem + 3.4vw, 3.6rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.3; --leading-normal: 1.7; /* فارسی به ارتفاع خط بیشتری نیاز دارد */ --leading-loose: 1.9; /* ---------- فاصله: مقیاس ۴ ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---------- شعاع ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- سایه ---------- */ --shadow-sm: 0 1px 2px rgb(22 32 30 / 0.06); --shadow-md: 0 4px 16px rgb(22 32 30 / 0.08); --shadow-lg: 0 18px 48px rgb(22 32 30 / 0.12); /* ---------- حرکت ---------- */ --duration-fast: 120ms; --duration-base: 220ms; --duration-slow: 420ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ---------- چیدمان ---------- */ --container: 1180px; --container-narrow: 820px; color-scheme: light; } /* تم تاریک از ترجیح سیستم — مگر اینکه کاربر دستی روشن را انتخاب کرده باشد */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0F1413; --color-surface: #161C1B; --color-surface-2: #1E2625; --color-surface-3: #27302E; --color-text: #E9EEEC; --color-text-muted: #9FADA9; --color-text-inverse: #16201E; --color-border: #2A3432; --color-border-strong: #5A6764; --color-primary: #43D4C4; --color-primary-hover: #63E0D2; --color-primary-soft: #11302D; /* در تم تاریک متن دکمه تیره است: سفید روی سبزآبی روشن فقط ۱.۸۳ کنتراست دارد و ناخواناست. */ --color-on-primary: #0A1918; --color-language: #F2A661; --color-language-surface: #F2A661; --color-language-soft: #2A1F16; --color-programming: #AE9FFF; --color-programming-surface: #AE9FFF; --color-programming-soft: #1F1B33; --color-success: #5BD6A9; --color-success-soft: #123028; --color-warning: #E8BC5A; --color-warning-soft: #2E2612; --color-danger: #FF8C82; --color-danger-soft: #331A18; --color-code-bg: #0A0F0E; --color-code-text: #E9EEEC; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45); --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55); color-scheme: dark; } } /* انتخاب دستی کاربر — بر ترجیح سیستم اولویت دارد */ :root[data-theme="dark"] { --color-bg: #0F1413; --color-surface: #161C1B; --color-surface-2: #1E2625; --color-surface-3: #27302E; --color-text: #E9EEEC; --color-text-muted: #9FADA9; --color-text-inverse: #16201E; --color-border: #2A3432; --color-border-strong: #5A6764; --color-primary: #43D4C4; --color-primary-hover: #63E0D2; --color-primary-soft: #11302D; --color-on-primary: #0A1918; --color-language: #F2A661; --color-language-surface: #F2A661; --color-language-soft: #2A1F16; --color-programming: #AE9FFF; --color-programming-surface: #AE9FFF; --color-programming-soft: #1F1B33; --color-success: #5BD6A9; --color-success-soft: #123028; --color-warning: #E8BC5A; --color-warning-soft: #2E2612; --color-danger: #FF8C82; --color-danger-soft: #331A18; --color-code-bg: #0A0F0E; --color-code-text: #E9EEEC; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45); --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55); color-scheme: dark; }