:root { /* Brand Color Palette - Charcoal, Warm White, Gold Accent */ --color-charcoal-hsl: 0, 0%, 9%; --color-charcoal: hsl(var(--color-charcoal-hsl)); --color-warm-white-hsl: 40, 22%, 96%; --color-warm-white: hsl(var(--color-warm-white-hsl)); --color-graphite-hsl: 0, 0%, 17%; --color-graphite: hsl(var(--color-graphite-hsl)); --color-gold-hsl: 40, 48%, 60%; --color-gold: hsl(var(--color-gold-hsl)); --color-sand-hsl: 37, 26%, 79%; --color-sand: hsl(var(--color-sand-hsl)); --color-bronze-hsl: 37, 25%, 44%; --color-bronze: hsl(var(--color-bronze-hsl)); /* Semantic Overlay and Lightness Utilities */ --bg-color: var(--color-warm-white); --text-color: var(--color-charcoal); --text-muted: hsla(var(--color-charcoal-hsl), 0.6); --border-color: hsla(var(--color-charcoal-hsl), 0.1); --card-bg: hsla(0, 0%, 100%, 0.65); /* Font Stacks */ --font-serif-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-sans-en: 'Cairo', 'Cairo', 'Cairo', system-ui, sans-serif; --font-ar: 'Cairo', 'Cairo', system-ui, sans-serif; /* Default Font Family assignments (controlled dynamically by lang attribute on ) */ --font-heading: var(--font-serif-en); --font-body: var(--font-sans-en); /* Editorial Spacing System (Architectural & Spacious) */ --space-unit: 1rem; --space-xs: calc(var(--space-unit) * 0.5); /* 8px */ --space-sm: calc(var(--space-unit) * 0.75); /* 12px */ --space-md: calc(var(--space-unit) * 1.5); /* 24px */ --space-lg: calc(var(--space-unit) * 3); /* 48px */ --space-xl: calc(var(--space-unit) * 6); /* 96px */ --space-xxl: calc(var(--space-unit) * 10); /* 160px */ /* Structural Dimensions */ --header-height-full: 100px; --header-height-shrink: 70px; --container-max-width: 1440px; /* Motion & Animations (Luxury 60FPS Easings) */ --ease-custom: cubic-bezier(0.25, 1, 0.3, 1); /* Elegant decelerate */ --ease-slow: cubic-bezier(0.76, 0, 0.24, 1); /* Cinematic slow push */ --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 0.25s var(--ease-custom); --transition-normal: 0.45s var(--ease-custom); --transition-smooth: 0.75s var(--ease-custom); --transition-cinematic: 1.2s var(--ease-slow); /* Custom Cursor Variables */ --cursor-size: 8px; --cursor-ring-size: 40px; --cursor-color: var(--color-gold); /* Scroll Progress Indicator */ --scroll-progress: 0%; } /* Dark Theme overrides (for sections where we want a cinematic dark aesthetic, e.g., Hero, Footer, and special feature sections) */ .theme-dark { --bg-color: var(--color-charcoal); --text-color: var(--color-warm-white); --text-muted: hsla(var(--color-warm-white-hsl), 0.65); --border-color: hsla(var(--color-warm-white-hsl), 0.12); --card-bg: hsla(var(--color-graphite-hsl), 0.45); } /* Font selection based on document language */ html[lang="ar"] { --font-heading: var(--font-ar); --font-body: var(--font-ar); }