/** * ============================================================================ * PRIYA GLAM STUDIO - DESIGN SYSTEM * Premium Beauty Brand Color Palette & Design Tokens * ============================================================================ */ :root { /* =========================== BRAND COLORS - PREMIUM PALETTE Rose Gold & Burgundy Theme =========================== */ /* Primary - Rose Gold Gradient */ --color-primary-50: #fff5f7; --color-primary-100: #ffe4e9; --color-primary-200: #ffc9d4; --color-primary-300: #ff9db0; --color-primary-400: #ff6685; --color-primary-500: #f54275; /* Main Brand - Rose Gold */ --color-primary-600: #e0245e; --color-primary-700: #bc1a4d; --color-primary-800: #9d1846; --color-primary-900: #881942; /* Secondary - Deep Burgundy */ --color-secondary-50: #fdf4f5; --color-secondary-100: #fbe8eb; --color-secondary-200: #f8d5db; --color-secondary-300: #f2b2be; --color-secondary-400: #e98599; --color-secondary-500: #d85775; --color-secondary-600: #c23d5e; --color-secondary-700: #a32f4e; /* Deep Burgundy */ --color-secondary-800: #882a46; --color-secondary-900: #74273f; /* Accent - Warm Gold */ --color-accent-50: #fffbf0; --color-accent-100: #fef6dc; --color-accent-200: #fdeab8; --color-accent-300: #fbd98a; --color-accent-400: #f9c04f; --color-accent-500: #f7a826; /* Warm Gold */ --color-accent-600: #e88716; --color-accent-700: #c16514; --color-accent-800: #9a4f18; --color-accent-900: #7c4119; /* Neutrals - Warm Grays */ --color-neutral-50: #fafaf9; --color-neutral-100: #f5f5f4; --color-neutral-200: #e7e5e4; --color-neutral-300: #d6d3d1; --color-neutral-400: #a8a29e; --color-neutral-500: #78716c; --color-neutral-600: #57534e; --color-neutral-700: #44403c; --color-neutral-800: #292524; --color-neutral-900: #1c1917; /* Background Colors */ --color-bg-primary: #ffffff; --color-bg-secondary: #fafaf9; --color-bg-cream: #fef9f3; --color-bg-rose: #fff5f7; --color-bg-champagne: #fef6ec; /* =========================== GRADIENTS - SIGNATURE LOOKS =========================== */ --gradient-rose-gold: linear-gradient(135deg, #f54275 0%, #e0245e 50%, #bc1a4d 100%); --gradient-burgundy: linear-gradient(135deg, #a32f4e 0%, #882a46 50%, #74273f 100%); --gradient-champagne: linear-gradient(135deg, #fef6ec 0%, #fdeab8 50%, #f9c04f 100%); --gradient-hero: linear-gradient(135deg, rgba(245, 66, 117, 0.95) 0%, rgba(188, 26, 77, 0.95) 100%); --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); /* Glass Morphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(245, 66, 117, 0.1); --glass-shadow: 0 8px 32px rgba(245, 66, 117, 0.12); /* =========================== TYPOGRAPHY - ELEGANT SYSTEM =========================== */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-heading: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-accent: 'Sacramento', cursive; /* For decorative text */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Font Sizes - Fluid Typography */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem); --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem); --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem); --text-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem); /* =========================== SPACING - CONSISTENT SCALE =========================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 2.5rem; /* 40px */ --spacing-3xl: 3rem; /* 48px */ --spacing-4xl: 4rem; /* 64px */ --spacing-5xl: 5rem; /* 80px */ --spacing-6xl: 6rem; /* 96px */ /* Section Spacing */ --section-padding-y: clamp(3rem, 5vw, 5rem); --section-padding-x: clamp(1rem, 3vw, 2rem); /* =========================== BORDER RADIUS - SOFT CURVES =========================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Pill shape */ /* =========================== SHADOWS - DEPTH HIERARCHY =========================== */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px -1px rgba(245, 66, 117, 0.06), 0 1px 2px -1px rgba(245, 66, 117, 0.04); --shadow-md: 0 4px 6px -1px rgba(245, 66, 117, 0.1), 0 2px 4px -1px rgba(245, 66, 117, 0.06); --shadow-lg: 0 10px 15px -3px rgba(245, 66, 117, 0.1), 0 4px 6px -2px rgba(245, 66, 117, 0.05); --shadow-xl: 0 20px 25px -5px rgba(245, 66, 117, 0.12), 0 10px 10px -5px rgba(245, 66, 117, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(245, 66, 117, 0.25); /* Colored Shadows */ --shadow-rose: 0 8px 24px rgba(245, 66, 117, 0.2); --shadow-rose-lg: 0 12px 32px rgba(245, 66, 117, 0.3); --shadow-gold: 0 8px 24px rgba(247, 168, 38, 0.2); --shadow-burgundy: 0 8px 24px rgba(163, 47, 78, 0.25); /* =========================== TRANSITIONS - SMOOTH MOTION =========================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1); /* =========================== Z-INDEX SCALE - LAYERING =========================== */ --z-below: -1; --z-normal: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-notification: 800; --z-loader: 9999; /* =========================== LAYOUT - STRUCTURE =========================== */ --container-max-width: 1320px; --container-narrow: 960px; --container-wide: 1536px; --header-height: 85px; --mobile-cta-height: 65px; /* =========================== EFFECTS - DECORATIVE =========================== */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; --blur-xl: 40px; /* Backdrop Filters */ --backdrop-blur-sm: blur(8px); --backdrop-blur-md: blur(16px); --backdrop-blur-lg: blur(24px); } /* =========================== DARK MODE OVERRIDES (OPTIONAL) =========================== */ @media (prefers-color-scheme: dark) { :root { --color-bg-primary: #1c1917; --color-bg-secondary: #292524; --glass-bg: rgba(28, 25, 23, 0.75); } }