/* ========================================================================== Sarah Eve Aesthetics — Design Tokens Gradient-led, muted, skin-tone-adjacent palette. Keep saturation low — these should read as premium/clinical, never as tech-startup neon. ========================================================================== */ :root { /* Typography */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Base neutrals */ --color-ivory: #fbf7f2; --color-ivory-deep: #f3e9df; --color-white: #ffffff; --color-espresso: #2b1f1a; --color-espresso-soft: #4a372c; --color-taupe: #8b7568; --color-taupe-light: #b3a196; --color-line: rgba(43, 32, 24, 0.12); --color-line-soft: rgba(43, 32, 24, 0.07); /* Accent hues (skin-tone-adjacent, low-saturation) */ --color-blush: #e8c7b8; --color-blush-light: #f3e3d8; --color-champagne: #e9d3a3; --color-champagne-light: #f6ecd8; --color-rose: #d9a9a0; --color-rose-deep: #c68f83; --color-gold: #c9a15d; --color-gold-light: #e0c07f; --color-plum: #3a2530; --color-plum-deep: #2a1a22; /* Gradients — the site's signature device */ --gradient-hero: linear-gradient(135deg, #f7e9dc 0%, #ecc9b8 45%, #d9a9a0 100%); --gradient-hero-soft: linear-gradient(180deg, #fbf7f2 0%, #f6e6d8 100%); --gradient-dark: linear-gradient(135deg, #2b1f1a 0%, #3a2530 55%, #55362f 100%); --gradient-dark-radial: radial-gradient(120% 120% at 20% 10%, #4a3229 0%, #2b1f1a 60%, #201512 100%); --gradient-gold: linear-gradient(90deg, #c9a15d 0%, #e9d3a3 100%); --gradient-card: linear-gradient(160deg, #fffdfb 0%, #f6e9de 100%); --gradient-card-dark: linear-gradient(160deg, #3a2a24 0%, #2b1f1a 100%); --gradient-edge-glow: linear-gradient(135deg, rgba(201, 161, 93, 0.65), rgba(217, 169, 160, 0.1)); --gradient-mesh: radial-gradient(60% 60% at 15% 20%, rgba(233, 211, 163, 0.55) 0%, transparent 60%), radial-gradient(50% 50% at 85% 30%, rgba(217, 169, 160, 0.45) 0%, transparent 60%), radial-gradient(70% 70% at 50% 100%, rgba(232, 199, 184, 0.5) 0%, transparent 65%); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Radii */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px; /* Shadows */ --shadow-soft: 0 20px 60px -25px rgba(43, 32, 24, 0.35); --shadow-card: 0 30px 80px -30px rgba(43, 32, 24, 0.28); --shadow-lift: 0 40px 100px -20px rgba(43, 32, 24, 0.4); /* Motion */ --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 450ms var(--ease-editorial); --transition-fast: 220ms var(--ease-editorial); /* Layout */ --container-max: 1240px; --container-narrow: 820px; --header-height: 84px; /* Z-index scale */ --z-header: 100; --z-mobile-nav: 110; --z-float: 90; --z-cta-bar: 95; --z-cookie: 200; } /* Reduced-motion / accessibility-toggle state applied to by a11y-toggle.js */ html.reduce-motion * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }