/* ============================================ FRUITION DESIGN — CSS THEME SYSTEM Change theme by adding class to : class="theme-evergreen" (default) class="theme-coastal" class="theme-wildflower" ============================================ */ :root, .theme-evergreen { --color-bg: #FAF8F5; --color-surface: #F0ECE4; --color-text: #1C1C1C; --color-text-muted: #5A5A5A; --color-accent: #2D5A3D; --color-accent-hover:#234A31; --color-accent-2: #C4622D; --color-accent-2-hover:#A34E24; --color-border: #DDD8CE; --color-white: #FFFFFF; --color-overlay: rgba(45,90,61,0.85); --font-body: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bad Script', cursive; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: clamp(1.5rem, 3vw, 2rem); --text-2xl: clamp(2rem, 4vw, 3rem); --text-hero: clamp(2.5rem, 6vw, 4.5rem); --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --radius: 4px; --radius-lg: 12px; --shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --nav-height: 72px; --max-width: 1200px; --transition: 0.3s ease; } .theme-coastal { --color-bg: #F5F8FA; --color-surface: #E8EEF2; --color-accent: #1A5276; --color-accent-hover:#144361; --color-accent-2: #C9A227; --color-accent-2-hover:#A88420; --color-border: #CDD6DC; --color-overlay: rgba(26,82,118,0.85); } .theme-wildflower { --color-bg: #FCF9F6; --color-surface: #F0EBE8; --color-accent: #6B3F6B; --color-accent-hover:#572F57; --color-accent-2: #7D9B5F; --color-accent-2-hover:#667D4D; --color-border: #DDD3D0; --color-overlay: rgba(107,63,107,0.85); }