/* ========================================================================== کاد — Design Tokens پالت طلایی / مشکی / قهوه‌ای — رنگ‌ها، تایپوگرافی، فاصله‌گذاری و سایه‌ها ========================================================================== */ :root { /* -------- Brand colors (طلایی) -------- */ --color-primary: #c9962c; --color-primary-light: #e3c16f; --color-primary-lighter: #fbf3e1; --color-primary-dark: #9c7a24; --color-secondary: #201811; /* -------- Semantic colors -------- */ --color-success: #4d7c4a; --color-success-bg: #eef3ea; --color-warning: #b96b2e; --color-warning-bg: #fbeee1; --color-danger: #a83a32; --color-danger-bg: #f8e9e7; /* -------- Neutrals (warm stone/coffee scale — به‌جای slate آبی) -------- */ --color-white: #fbf8f2; --color-gray-50: #f5efe4; --color-gray-100: #ede3d0; --color-gray-200: #dfcfb0; --color-gray-300: #c9b48c; --color-gray-400: #a98f65; --color-gray-500: #8a7048; --color-gray-600: #6b5636; --color-gray-700: #4a3b26; --color-gray-800: #2e2418; --color-gray-900: #1a140d; /* -------- Section tint palette (طلایی/قهوه‌ای، به‌جای آبی) -------- */ --tint-50: #fbf1dc; --tint-200: #e9c878; --tint-500: #c9962c; --tint-900: #6b4a14; /* -------- Subject accent colors (category cards) -------- */ --subject-calc-bg: #f3e1dd; --subject-calc-fg: #a8453a; --subject-geo-bg: #dfeae1; --subject-geo-fg: #3f7d5c; --subject-discrete-bg: #f6e6cf; --subject-discrete-fg: #b5762a; --subject-chem-bg: #e6ecd8; --subject-chem-fg: #5c7a34; --subject-physics-bg: #e8e0ee; --subject-physics-fg: #6b4f96; /* -------- Typography -------- */ --font-family: 'Vazirmatn', 'Tahoma', sans-serif; --text-h1-size: 2rem; /* 32px */ --text-h2-size: 1.5rem; /* 24px */ --text-h3-size: 1.25rem; /* 20px */ --text-h4-size: 1rem; /* 16px */ --text-body1-size: 1rem; /* 16px */ --text-body2-size: 0.875rem;/* 14px */ --text-caption-size: 0.75rem; /* 12px */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* -------- Spacing (4px base) -------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* -------- Radius -------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* -------- Shadows (soft, warm brown/black-tinted) -------- */ --shadow-sm: 0 1px 2px rgba(26, 20, 13, 0.08); --shadow-md: 0 4px 12px rgba(42, 30, 12, 0.12); --shadow-lg: 0 12px 32px rgba(42, 30, 12, 0.16); --shadow-xl: 0 20px 48px rgba(42, 30, 12, 0.20); --shadow-focus: 0 0 0 3px rgba(201, 150, 44, 0.35); /* -------- Layout -------- */ --container-max: 1280px; --header-height: 76px; --header-height-mobile: 64px; /* -------- Motion -------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms var(--ease); --transition-base: 220ms var(--ease); } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; } } /* ========================================================================== تم تیره — با data-theme="dark" روی فعال می‌شود (مشکی + طلایی) ========================================================================== */ [data-theme='dark'] { --color-primary: #e3b955; --color-primary-light: #f0d38a; --color-primary-lighter: #2b2114; --color-primary-dark: #c9962c; --color-secondary: #ede3d0; --color-success: #7fa579; --color-success-bg: #1c2419; --color-warning: #d68f52; --color-warning-bg: #2c2013; --color-danger: #cc6b60; --color-danger-bg: #2a1815; --color-white: #1a140d; --color-gray-50: #14100a; --color-gray-100: #211a12; --color-gray-200: #322618; --color-gray-300: #493823; --color-gray-400: #6b5636; --color-gray-500: #a98f65; --color-gray-600: #c9b48c; --color-gray-700: #dfcfb0; --color-gray-800: #ede3d0; --color-gray-900: #f5efe4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6); --shadow-xl: 0 22px 54px rgba(0, 0, 0, 0.65); } [data-theme='dark'] body { background: #0d0a06; }