/** * Sparkles Design Tokens * CSS Custom Properties (design tokens) - ONLY * Version: 4.0.0 - Color consolidation * * This file contains ONLY non-color CSS custom properties * For color tokens, see store-variables.css * For utility classes that USE these tokens, see sparkles-utilities.css */ :root { /* ========== CUSTOM TYPOGRAPHY ========== */ /* Note: Use Tailwind's font-sans, font-serif for standard fonts */ /* Only custom fonts unique to Sparkles brand */ --font-primary: 'Montserrat', system-ui, -apple-system, sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Luxury display font */ --font-secondary: 'Playfair Display', 'Montserrat', Georgia, serif; --font-heading: var(--font-display); /* Alias for heading font */ /* ========== CUSTOM SPACING EXTENSIONS ========== */ /* Note: Use Tailwind's spacing scale (space-* utilities) for standard spacing */ /* Only custom values that extend beyond Tailwind's scale */ --space-luxury: 10rem; /* 160px - Extra large luxury spacing */ /* ========== CUSTOM BORDER RADIUS ========== */ /* Note: Use Tailwind's rounded-* utilities for standard radius */ /* Only custom values for unique Sparkles styling */ --radius-luxury: 24px; /* Extra large luxury radius */ /* ========== SEMANTIC BORDER RADIUS ========== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-full: 9999px; /* Pill */ /* Generic Component Radii */ --radius-card: var(--radius-lg); --radius-surface: var(--radius-lg); --radius-btn: var(--radius-md); --radius-input: var(--radius-md); --radius-badge: var(--radius-full); /* ========== Z-INDEX SCALE ========== */ --z-low: 10; --z-dropdown: 20; --z-sticky: 30; --z-fixed: 40; --z-modal-backdrop: 50; --z-modal: 60; --z-popover: 70; --z-tooltip: 80; --z-notification: 90; --z-maximum: 100; --z-skip-link: 10000; /* Absolute top for accessibility */ /* ========== LAYOUT CONSTANTS ========== */ --container-max: 1200px; --hero-min-height: 60vh; /* ========== CUSTOM ANIMATION TIMING ========== */ /* Note: Use Tailwind's duration-* and ease-* utilities for standard timing */ /* Sparkles-specific animation values */ --animation-duration-fast: 150ms; --animation-duration-normal: 300ms; --animation-duration-slow: 500ms; --animation-luxury: 600ms; /* Slower, more elegant transitions */ --animation-premium: 400ms; /* Custom easing curves for luxury feel */ --animation-easing-standard: ease-out; --animation-easing-premium: cubic-bezier(0.19, 1, 0.22, 1); --animation-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Standard transition tokens (used by sparkles-animations.css) */ --animation-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Standard ease */ --animation-duration: 0.3s; /* Accessibility tokens */ --min-touch-target: 44px; /* WCAG 2.2 AAA touch target */ /* ========== IMAGE SYSTEM TOKENS ========== */ --sparkles-image-transition-duration: 300ms; --sparkles-image-skeleton-duration: 1.5s; --sparkles-image-placeholder-color: var(--gray-200); --sparkles-image-error-opacity: 0.5; --sparkles-webp-support: 0; /* Default - overridden by JS */ --sparkles-avif-support: 0; /* Default - overridden by JS */ /* ========== ELEVATION SYSTEM (Enhanced beyond Tailwind) ========== */ /* Subtle Shadows */ --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-outline: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); /* Layered Elevations (Material Design inspired) */ --elevation-0: none; --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); --elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); --elevation-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); --elevation-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); /* ========== SPARKLES GRADIENTS ========== */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); --gradient-premium: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-secondary) 100%); --gradient-warm: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); --gradient-cool: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 50%, #E8E6DF 100%); --gradient-neutral: linear-gradient(135deg, var(--gray-50) 0%, var(--color-white) 100%); --gradient-sparkles: linear-gradient(45deg, var(--color-primary) 0%, var(--color-accent) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, var(--color-accent) 100%); /* ========== CUSTOM ANIMATIONS (Enhanced beyond Tailwind) ========== */ /* Custom Timing Functions */ --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ========== LAYOUT CONSTANTS ========== */ /* Application-specific layout values */ --header-height: 80px; --header-height-mobile: 60px; } /* ========== DARK MODE SUPPORT ========== */ @media (prefers-color-scheme: dark) { :root { /* Adjust shadows for dark backgrounds */ --shadow-subtle: 0 1px 2px rgba(255, 255, 255, 0.04); --shadow-xs: 0 2px 4px rgba(255, 255, 255, 0.06); --shadow-sm: 0 4px 6px rgba(255, 255, 255, 0.07); /* Keep brand colors consistent - Gold and cream work well in dark mode */ } } /* ========== PRINT STYLES ========== */ @media print { :root { /* Optimize for print */ --gradient-primary: none; --gradient-premium: none; --shadow-subtle: none; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --elevation-1: none; --elevation-2: none; --elevation-3: none; --elevation-4: none; --elevation-5: none; } } /* ========== USAGE NOTES ========== */ /* COLOR TOKENS: - All color tokens are defined in store-variables.css - This file contains only non-color design tokens ARCHITECTURE BENEFITS: - Clear separation of concerns (colors vs non-colors) - Single source of truth for each token category - Consistent cascade order prevents override conflicts - Store detection handles dynamic theme switching For development: 1. Use Tailwind utilities (bg-primary, text-secondary) first 2. Fall back to CSS variables (var(--color-primary)) for dynamic values 3. Refer to store-variables.css for all color tokens */