/* ============================================================ ORVENA — Design Tokens Single source of truth. Every component references these. Nothing in the codebase may hard-code a colour, size or duration. ============================================================ */ :root { /* ---------- 1. COLOUR - brand ---------- */ /* Warm light on warm neutrals, not the default beauty-pink. Colour is used sparingly so that product photography carries the visual weight. Drawn when the shop was called نور — light — and kept when it became ORVENA, because what a shop is named after and what it looks like are different questions. */ --color-ink: #1A1614; /* espresso-black, warm. Primary text + primary button */ --color-ink-hover: #332B26; --color-accent: #A9773F; /* antique gold. Editorial marks, links, active states */ --color-accent-hover: #8E6233; --color-accent-soft: #F0E5D6; /* gold tinted surface */ --color-secondary: #7A5A63; /* muted plum-rose. Exclusive / editorial second voice */ --color-secondary-soft: #F2E9EB; /* ---------- 2. COLOUR - surfaces ---------- */ --color-background: #FFFFFF; --color-surface: #FAF7F3; /* warm off-white - the "premium" ground */ --color-surface-alt: #F4EFE9; --color-surface-sunken: #EFE8E0; --color-overlay: rgba(26, 22, 20, 0.48); --color-scrim: rgba(26, 22, 20, 0.04); /* ---------- 3. COLOUR - text ---------- */ --color-text: #1A1614; --color-text-secondary: #6B615A; --color-text-muted: #95897F; --color-text-inverse: #FFFFFF; --color-text-onaccent: #FFFFFF; /* ---------- 4. COLOUR - lines ---------- */ --color-border: #E6DFD7; --color-border-strong: #D3C7BA; --color-border-ink: #1A1614; --color-focus: #1A1614; --color-focus-ring: rgba(169, 119, 63, 0.45); /* ---------- 5. COLOUR - status ---------- */ --color-success: #2E7D5B; --color-success-soft: #E4F1EA; --color-warning: #A9772A; --color-warning-soft: #FBF0DC; --color-error: #B4342B; --color-error-soft: #FBE9E7; --color-info: #33607F; --color-info-soft: #E7EFF5; /* ---------- 6. COLOUR - commerce ---------- */ --color-sale: #C0392B; /* discounted price + % badge. Never used for anything else */ --color-sale-soft: #FBEAE7; --color-new: #1A1614; --color-best: #A9773F; --color-exclusive: #7A5A63; --color-soldout: #95897F; --color-rating: #C08A2E; /* star fill */ /* ---------- 7. TYPEFACES ---------- */ /* Latin: Inter. Arabic: IBM Plex Sans Arabic. Persian: Vazirmatn. [lang] on swaps --font-sans; see base.css */ --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-persian: "Vazirmatn", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-sans: var(--font-latin); --font-numeric: "Inter", system-ui, sans-serif; /* prices always render in Latin numerals */ /* ---------- 8. TYPE SCALE ---------- */ /* Two line-height tracks. Arabic and Persian need MORE leading than Latin: deep descenders, dots below the baseline, taller ascenders. --lh-* is the Latin value; :lang(ar)/:lang(fa) override below. */ --fs-display: 2.75rem; --lh-display: 1.14; /* 44 / 50 */ --fs-h1: 2.125rem; --lh-h1: 1.24; /* 34 / 42 */ --fs-h2: 1.75rem; --lh-h2: 1.28; /* 28 / 36 */ --fs-h3: 1.375rem; --lh-h3: 1.36; /* 22 / 30 */ --fs-h4: 1.125rem; --lh-h4: 1.44; /* 18 / 26 */ --fs-body-lg: 1.0625rem; --lh-body-lg: 1.65; /* 17 / 28 */ --fs-body: 0.9375rem; --lh-body: 1.73; /* 15 / 26 */ --fs-body-sm: 0.8125rem; --lh-body-sm: 1.69; /* 13 / 22 */ --fs-caption: 0.75rem; --lh-caption: 1.5; /* 12 / 18 */ --fs-price: 1.0625rem; --lh-price: 1.4; /* 17 */ --fs-price-lg: 1.625rem; --lh-price-lg: 1.3; /* 26 - PDP */ --fs-button: 0.9375rem; --lh-button: 1.2; --fs-nav: 0.9375rem; --lh-nav: 1.2; --fs-badge: 0.6875rem; --lh-badge: 1.45; /* 11 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tracking is a LATIN-ONLY tool. Arabic/Persian are cursive scripts - letter-spacing severs the joins. :lang(ar)/:lang(fa) force these to 0. */ --tracking-display: -0.022em; --tracking-heading: -0.014em; --tracking-body: 0em; --tracking-caps: 0.09em; /* ---------- 9. SPACING ---------- */ --space-0: 0; --space-1: 0.125rem; /* 2 */ --space-2: 0.25rem; /* 4 */ --space-3: 0.5rem; /* 8 */ --space-4: 0.75rem; /* 12 */ --space-5: 1rem; /* 16 */ --space-6: 1.25rem; /* 20 */ --space-7: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-9: 2.5rem; /* 40 */ --space-10: 3rem; /* 48 */ --space-11: 4rem; /* 64 */ --space-12: 5rem; /* 80 */ --space-13: 6rem; /* 96 */ --space-14: 7.5rem; /* 120 */ /* ---------- 10. LAYOUT ---------- */ --container-max: 1320px; --container-narrow: 820px; /* editorial / checkout / legal */ --container-form: 480px; /* auth */ --gutter: 1.5rem; /* desktop 24 */ --gutter-md: 1.25rem; /* tablet 20 */ --gutter-sm: 1rem; /* mobile 16 */ --grid-gap: 1.5rem; --grid-gap-sm: 0.75rem; /* mobile 2-col product grid */ --section-gap: var(--space-13); /* 96 between homepage sections */ --section-gap-sm: var(--space-10); /* 48 on mobile */ --header-h: 64px; --header-nav-h: 48px; --announce-h: 36px; --bottomnav-h: 58px; /* ---------- 11. RATIOS ---------- */ --ratio-product: 4 / 5; /* default product frame - see DESIGN_DECISIONS D-03 */ --ratio-compact: 1 / 1; /* listing "compact" view toggle */ --ratio-category: 3 / 4; --ratio-editorial: 3 / 2; --ratio-hero: 16 / 9; --ratio-hero-sm: 4 / 5; --ratio-banner: 21 / 9; /* ---------- 12. RADII - restrained on purpose ---------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; /* buttons, inputs, product frame */ --radius-lg: 8px; /* drawers, modals, popovers */ --radius-xl: 16px; --radius-pill: 999px; /* chips, filter pills, avatars only */ /* ---------- 13. ELEVATION - floating UI only, never product cards ---------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.06); --shadow-md: 0 4px 16px rgba(26, 22, 20, 0.08); --shadow-lg: 0 16px 48px rgba(26, 22, 20, 0.12); --shadow-menu: 0 12px 32px rgba(26, 22, 20, 0.10); /* ---------- 14. MOTION ---------- */ --ease-out: cubic-bezier(0.20, 0.60, 0.20, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.20, 1); --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 320ms; --dur-drawer: 300ms; /* ---------- 15. Z-INDEX ---------- */ --z-base: 0; --z-raised: 10; --z-sticky: 200; --z-header: 300; --z-dropdown: 350; --z-overlay: 400; --z-drawer: 410; --z-modal: 500; --z-toast: 600; /* ---------- 16. BREAKPOINTS (reference - media queries cannot read vars) ---------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1600px; /* ---------- 17. FORM CONTROLS ---------- */ --control-h-sm: 36px; --control-h: 44px; /* min touch target on mobile */ --control-h-lg: 52px; /* primary CTA, PDP add-to-cart */ --control-px: 1rem; } /* Arabic and Persian get taller default leading and zero tracking. Applied at :root so every token consumer inherits it. */ :root:lang(ar), :root:lang(fa) { --lh-display: 1.34; --lh-h1: 1.40; --lh-h2: 1.42; --lh-h3: 1.50; --lh-h4: 1.58; --lh-body-lg: 1.85; --lh-body: 1.90; --lh-body-sm: 1.85; --lh-caption: 1.70; --lh-badge: 1.60; --tracking-display: 0em; --tracking-heading: 0em; --tracking-caps: 0em; } :root:lang(ar) { --font-sans: var(--font-arabic); } :root:lang(fa) { --font-sans: var(--font-persian); } /* Vazirmatn runs optically larger than IBM Plex Sans Arabic at the same px value, and Persian labels are longer. Nudge the display scale down for Persian so headings keep the same optical weight and stay on grid. */ :root:lang(fa) { --fs-display: 2.5rem; --fs-h1: 2rem; --fs-h2: 1.625rem; --fs-h3: 1.3125rem; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-drawer: 0ms; } }