/* Design tokens, local font references, and shared custom properties. */

:root {
    --bg-0: #ffffff;
    --bg-1: #faf8f5;
    --bg-2: #f3ece3;
    --cream-0: #fffdf9;
    --cream-1: #faf4ea;
    --cream-2: #efe3d1;
    --text-0: #1a1510;
    --text-1: #5c5246;
    --text-2: #948777;
    --primary: #802344;
    --primary-light: #a3385d;
    --primary-dark: #501227;
    --primary-deep: #2a0715;
    --gold: #c8993a;
    --gold-light: #e0b358;
    --gold-soft: #f3dfad;
    --gold-dark: #a67924;
    --royal-black: #090706;
    --royal-black-2: #120d0f;
    --royal-black-3: #1a1510;
    --text-on-dark: #fff8ec;
    --text-on-dark-muted: rgba(255, 248, 236, 0.72);
    --border-gold: rgba(200, 153, 58, 0.22);
    --border-gold-strong: rgba(200, 153, 58, 0.42);
    --border-light: rgba(255, 255, 255, 0.14);
    --r: 16px;
    --r-lg: 24px;
    --shadow-soft: 0 10px 30px rgba(26, 21, 16, 0.04);
    --shadow-premium: 0 28px 80px rgba(26, 21, 16, 0.12);
    --shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.32);
    --shadow-hover: 0 20px 40px rgba(26, 21, 16, 0.08);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --anim-slow: 14s;
    --anim-medium: 9s;
    --anim-long: 22s;
    --reveal-distance: 42px;
    --reveal-duration: 820ms;
    --reveal-delay: 0ms;
    --reveal-ease: cubic-bezier(.22, 1, .36, 1);
    --glow-burgundy: rgba(128, 35, 68, 0.34);
    --glow-burgundy-soft: rgba(128, 35, 68, 0.18);
    --glow-gold: rgba(200, 153, 58, 0.28);
    --glow-gold-soft: rgba(200, 153, 58, 0.14);
    --glow-cream: rgba(255, 248, 236, 0.16);
    --glow-black: rgba(9, 7, 6, 0.22);
    --bg-canvas: #ffffff;
    --bg-soft: #faf8f5;
    --bg-muted: #f3ece3;
    --bg-primary-subtle: #fbf5f7;
    --surface-card: #ffffff;
    --border-soft: rgba(26, 21, 16, 0.08);
    --border-primary-soft: rgba(128, 35, 68, 0.12);
    --shadow-card: 0 12px 36px rgba(26, 21, 16, 0.055);
    --effect-burgundy: rgba(128, 35, 68, 0.08);
    --effect-gold: rgba(200, 153, 58, 0.08);
    --effect-blush: rgba(251, 245, 247, 0.72);
    --effect-cream: rgba(255, 248, 236, 0.72);
    --effect-beige: rgba(243, 236, 227, 0.72);
    --effect-blur-lg: 96px;
    --effect-blur-md: 72px;
}

:root {
    --container-width: 1200px;
    --header-height: 80px;
    --radius-sm: 10px;
    --radius-md: var(--r);
    --radius-lg: 24px;
    --radius-pill: 999px;
    --font-family-primary: 'Tajawal', sans-serif;
}