/* Design tokens for the v2 front-end rebuild. Single source of truth for both RTL (fa) and LTR (en) — no .rtl/.ltr variants. Direction-dependent behavior comes from CSS logical properties + the `dir` attribute on , not from separate stylesheets. */ :root { /* Brand colors — carried over from the legacy theme's gold accent, now on a light (not near-black) page. --color-gold stays the bright brand gold for fills/borders/decorative accents; --color-gold-text is a deeper bronze used wherever gold is the TEXT color on a light surface, since the bright gold doesn't have enough contrast against white/off-white. */ --color-gold: #ceb36e; --color-gold-dim: #a98f57; --color-gold-text: #8a6a28; --color-gold-contrast: #1a1712; --color-bg: #faf8f4; --color-bg-raised: #f2efe6; --color-bg-overlay: rgba(20, 17, 12, 0.55); --color-surface: #ffffff; --color-border: #e6e0d4; --color-text: #241f18; --color-text-muted: #6b6255; --color-text-on-gold: #1a1712; --color-success: #2f8a57; --color-danger: #c0392b; --color-warning: #b57d1f; --color-info: #2f6fa8; /* Typography */ --font-display: "Playfair Display", "Noto Serif", serif; --font-body-fa: "IRANSans", "Sahel", Tahoma, sans-serif; --font-body-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --lh-tight: 1.2; --lh-normal: 1.6; /* Spacing scale */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-round: 999px; --shadow-sm: 0 2px 8px rgba(36, 31, 24, 0.08); --shadow-md: 0 8px 24px rgba(36, 31, 24, 0.14); --shadow-gold: 0 0 0 1px rgba(206, 179, 110, 0.4); --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms var(--ease); --transition-base: 250ms var(--ease); --transition-slow: 450ms var(--ease); /* Layout */ --container-max: 1400px; --container-pad: clamp(1rem, 4vw, 3rem); --header-h: 56px; --header-h-desktop: 132px; /* z-index scale */ --z-header: 100; --z-mobile-nav: 200; --z-dropcart: 150; --z-modal: 300; --z-toast: 400; /* Breakpoints, documented for reference only — CSS has no var() in media queries, so these are duplicated as literals in @media rules. */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* Per-language body font: keyed off the lang attribute set dynamically by _NewLayout.cshtml, so one stylesheet serves both fa and en. */ :root:lang(fa) { --font-body: var(--font-body-fa); } :root:lang(en) { --font-body: var(--font-body-en); }