/** * Web Design Builder - Color Scheme Variables * Each design style has a complete color palette with 8 variables * * Usage: Add the corresponding class to element * Example: */ /* ============================================ DV-A1 Mystical Dark - Purple Theme ============================================ */ .theme-mystical-dark { --primary: #7C3AED; --primary-light: #A78BFA; --primary-dark: #5B21B6; --accent: #C084FC; --background: #0F0A1A; --surface: #1A1025; --text: #FAFAF9; --text-muted: #A8A29E; } /* ============================================ DV-A2 Celestial Gold - Golden Theme ============================================ */ .theme-celestial-gold { --primary: #B45309; --primary-light: #D97706; --primary-dark: #92400E; --accent: #F59E0B; --background: #1C1917; --surface: #292524; --text: #FAFAF9; --text-muted: #A8A29E; } /* ============================================ DV-A3 Ethereal Teal - Teal Theme ============================================ */ .theme-ethereal-teal { --primary: #0D9488; --primary-light: #14B8A6; --primary-dark: #0F766E; --accent: #2DD4BF; --background: #042F2E; --surface: #0D3D3B; --text: #F0FDFA; --text-muted: #99F6E4; } /* ============================================ DV-A4 Gothic Rose - Rose Theme ============================================ */ .theme-gothic-rose { --primary: #BE185D; --primary-light: #DB2777; --primary-dark: #9D174D; --accent: #F472B6; --background: #1A0A12; --surface: #2D1320; --text: #FDF2F8; --text-muted: #FBCFE8; } /* ============================================ DV-A5 Cosmic Purple - Indigo Theme ============================================ */ .theme-cosmic-purple { --primary: #6366F1; --primary-light: #818CF8; --primary-dark: #4F46E5; --accent: #A5B4FC; --background: #0A0A1A; --surface: #12122E; --text: #EEF2FF; --text-muted: #C7D2FE; } /* ============================================ DV-A6 Mystic Emerald - Green Theme ============================================ */ .theme-mystic-emerald { --primary: #10B981; --primary-light: #34D399; --primary-dark: #059669; --accent: #6EE7B7; --background: #022C22; --surface: #064E3B; --text: #ECFDF5; --text-muted: #A7F3D0; } /* ============================================ DV-A7 Midnight Blue - Blue Theme ============================================ */ .theme-midnight-blue { --primary: #3B82F6; --primary-light: #60A5FA; --primary-dark: #2563EB; --accent: #93C5FD; --background: #0C1427; --surface: #1E3A5F; --text: #EFF6FF; --text-muted: #BFDBFE; } /* ============================================ DV-A8 Vintage Oracle - Brown Theme ============================================ */ .theme-vintage-oracle { --primary: #92400E; --primary-light: #B45309; --primary-dark: #78350F; --accent: #D97706; --background: #1C1917; --surface: #292524; --text: #FFFBEB; --text-muted: #FDE68A; } /* ============================================ DV-A9 Neon Cyber - Neon Green Theme ============================================ */ .theme-neon-cyber { --primary: #00FF88; --primary-light: #4DFFB3; --primary-dark: #00CC6A; --accent: #FF00FF; --background: #0A0A0F; --surface: #0F0F1A; --text: #E0FFE8; --text-muted: #80FFB3; } /* ============================================ DV-A10 Soft Pastel - Pink Theme ============================================ */ .theme-soft-pastel { --primary: #F9A8D4; --primary-light: #FBCFE8; --primary-dark: #EC4899; --accent: #A78BFA; --background: #FDF2F8; --surface: #FCE7F3; --text: #1F2937; --text-muted: #6B7280; } /* ============================================ DV-A11 Dark Elegance - Gray Theme ============================================ */ .theme-dark-elegance { --primary: #1F2937; --primary-light: #374151; --primary-dark: #111827; --accent: #D4AF37; --background: #0A0A0A; --surface: #171717; --text: #F9FAFB; --text-muted: #9CA3AF; } /* ============================================ DV-A12 Bohemian Spirit - Orange Theme ============================================ */ .theme-bohemian-spirit { --primary: #F59E0B; --primary-light: #FBBF24; --primary-dark: #D97706; --accent: #EF4444; --background: #1C1917; --surface: #292524; --text: #FFFBEB; --text-muted: #FDE68A; } /* ============================================ Base Variables (Default) ============================================ */ :root { --primary: #7C3AED; --primary-light: #A78BFA; --primary-dark: #5B21B6; --accent: #C084FC; --background: #0F0A1A; --surface: #1A1025; --text: #FAFAF9; --text-muted: #A8A29E; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; }