/** * Momentum52 - CSS Variables Foundation * * Purpose: Single source of truth for all theme-dependent values * Usage: Include this file first in every HTML page * Theme Switching: Change data-theme attribute on element * * Example: * * */ /* ================================================== FOUNDATION - Non-theme-specific values ================================================== */ :root { /* Typography */ --font-primary: 'Inter', sans-serif; --font-display: 'Cinzel', serif; --font-serif: 'Libre Baskerville', serif; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Font Weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Spacing Scale */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* Border Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* Z-Index Scale */ --z-base: 1; --z-dropdown: 100; --z-sticky: 100; --z-fixed: 200; --z-modal: 300; --z-popover: 400; --z-tooltip: 500; /* Breakpoints (for reference in media queries) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; } /* ================================================== DARK THEME - Default Theme ================================================== */ :root, body[data-theme="dark"] { /* ===== BACKGROUNDS ===== */ --bg-primary: #0f172a; /* Body background - deep navy */ --bg-secondary: #1e293b; /* Cards, header - dark slate */ --bg-tertiary: #334155; /* Hover states, inputs */ --bg-quaternary: #475569; /* Lighter elements */ /* ===== TEXT COLORS ===== */ --text-primary: #e2e8f0; /* Main body text - light gray */ --text-secondary: #cbd5e1; /* Nav links, secondary text */ --text-tertiary: #94a3b8; /* Muted text, placeholders */ --text-muted: #64748b; /* Very subtle text */ --text-inverse: #0f172a; /* Text on light backgrounds */ /* ===== ACCENT COLORS ===== */ --accent-primary: #60a5fa; /* Primary blue - active states */ --accent-hover: #3b82f6; /* Hover state */ --accent-active: #2563eb; /* Pressed/active state */ --accent-light: #93c5fd; /* Lighter variant */ --accent-dark: #1e40af; /* Darker variant */ --accent-bg: rgba(0, 191, 165, 0.15); /* Accent background for highlights */ --accent-border: #00bfa5; /* Accent border color */ --accent-color: #60a5fa; /* Alias for accent-primary */ /* ===== BORDERS ===== */ --border-primary: #334155; /* Standard borders */ --border-secondary: #475569; /* Lighter borders */ --border-tertiary: #64748b; /* Subtle borders */ --border-color: #334155; /* Alias for border-primary */ /* ===== SEMANTIC COLORS ===== */ /* Success (Green) */ --success: #22c55e; --success-hover: #16a34a; --success-light: #86efac; --success-bg: rgba(34, 197, 94, 0.1); /* Warning (Yellow/Amber) */ --warning: #fbbf24; --warning-hover: #f59e0b; --warning-light: #fcd34d; --warning-bg: rgba(251, 191, 36, 0.1); /* Danger (Red) */ --danger: #ef4444; --danger-hover: #dc2626; --danger-light: #fca5a5; --danger-bg: rgba(239, 68, 68, 0.1); --danger-color: #ef4444; /* Alias for danger */ /* Info (Blue) */ --info: #3b82f6; --info-hover: #2563eb; --info-light: #93c5fd; --info-bg: rgba(59, 130, 246, 0.1); /* ===== SHADOWS ===== */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); /* ===== SPECIAL EFFECTS ===== */ --overlay: rgba(15, 23, 42, 0.75); /* Modal backdrop */ --glass-bg: rgba(30, 41, 59, 0.7); /* Glassmorphism */ --glass-border: rgba(255, 255, 255, 0.1); } /* ================================================== LIGHT THEME - Optional Alternative ================================================== */ body[data-theme="light"] { /* ===== BACKGROUNDS ===== */ --bg-primary: #f8fafc; /* Body background - very light gray */ --bg-secondary: #ffffff; /* Cards, header - pure white */ --bg-tertiary: #f1f5f9; /* Hover states */ --bg-quaternary: #e2e8f0; /* Lighter elements */ /* ===== TEXT COLORS ===== */ --text-primary: #334155; /* Main body text - dark slate */ --text-secondary: #64748b; /* Secondary text */ --text-tertiary: #94a3b8; /* Muted text */ --text-muted: #cbd5e1; /* Very subtle text */ --text-inverse: #f8fafc; /* Text on dark backgrounds */ /* ===== ACCENT COLORS ===== */ --accent-primary: #3b82f6; /* Primary blue */ --accent-hover: #2563eb; /* Hover state */ --accent-active: #1e40af; /* Pressed/active state */ --accent-light: #60a5fa; /* Lighter variant */ --accent-dark: #1e3a8a; /* Darker variant */ --accent-bg: rgba(0, 191, 165, 0.1); /* Accent background for highlights */ --accent-border: #00bfa5; /* Accent border color */ --accent-color: #3b82f6; /* Alias for accent-primary */ /* ===== BORDERS ===== */ --border-primary: #e2e8f0; /* Standard borders */ --border-secondary: #cbd5e1; /* Lighter borders */ --border-tertiary: #94a3b8; /* Subtle borders */ --border-color: #e2e8f0; /* Alias for border-primary */ /* ===== SEMANTIC COLORS ===== */ /* (Stay the same as dark theme) */ --success: #22c55e; --success-hover: #16a34a; --success-light: #86efac; --success-bg: rgba(34, 197, 94, 0.1); --warning: #fbbf24; --warning-hover: #f59e0b; --warning-light: #fcd34d; --warning-bg: rgba(251, 191, 36, 0.1); --danger: #ef4444; --danger-hover: #dc2626; --danger-light: #fca5a5; --danger-bg: rgba(239, 68, 68, 0.05); --danger-color: #ef4444; /* Alias for danger */ --info: #3b82f6; --info-hover: #2563eb; --info-light: #93c5fd; --info-bg: rgba(59, 130, 246, 0.1); /* ===== SHADOWS ===== */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25); /* ===== SPECIAL EFFECTS ===== */ --overlay: rgba(15, 23, 42, 0.5); /* Lighter overlay */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.1); } /* ================================================== GRADIENT PRESETS (Theme-Independent) ================================================== */ :root { /* Primary Gradients */ --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); /* Success Gradients */ --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); /* Warning Gradients */ --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* Danger Gradients */ --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Special Purpose */ --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); } /* ================================================== USAGE EXAMPLES & DOCUMENTATION ================================================== */ /* Example: Basic usage -------------------- body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary); } Example: Buttons ---------------- .btn-primary { background: var(--gradient-primary); color: white; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); transition: var(--transition-base); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } Example: Cards -------------- .card { background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-xl); } Example: Navigation Links ------------------------- nav a { color: var(--text-secondary); transition: color var(--transition-base); } nav a:hover { color: var(--accent-primary); } nav a.active { color: var(--accent-primary); font-weight: var(--weight-semibold); } Example: Theme Switching (JavaScript) ------------------------------------- // Toggle between themes function toggleTheme() { const body = document.body; const currentTheme = body.getAttribute('data-theme') || 'dark'; const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; body.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); } // Load saved theme on page load document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme') || 'dark'; document.body.setAttribute('data-theme', savedTheme); }); Example: Semantic Colors ------------------------ .success-message { background-color: var(--success-bg); color: var(--success); border: 1px solid var(--success-light); } .danger-button { background: var(--gradient-danger); } .danger-button:hover { background: var(--danger-hover); } */ /* ================================================== THEME-AWARE UTILITY CLASSES (Optional) ================================================== */ /* Background utilities */ .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } /* Text utilities */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } /* Border utilities */ .border-primary { border-color: var(--border-primary); } .border-secondary { border-color: var(--border-secondary); } /* ================================================== NOTES FOR DEVELOPERS ================================================== */ /* Best Practices: --------------- 1. Always use CSS variables for theme-dependent values 2. Use semantic color names (--success, --danger) over specific colors 3. Test your components in both dark and light themes 4. Use the gradient presets for consistent button styling 5. Leverage spacing scale for consistent padding/margins Migration Strategy: ------------------- 1. Replace hardcoded colors with variables 2. Test one component at a time 3. Use browser DevTools to verify color values 4. Check accessibility (contrast ratios) Common Mistakes to Avoid: ------------------------ ❌ Don't: background-color: #0f172a; ✅ Do: background-color: var(--bg-primary); ❌ Don't: color: #60a5fa; ✅ Do: color: var(--accent-primary); ❌ Don't: padding: 16px; ✅ Do: padding: var(--space-md); Performance: ----------- - CSS variables are fast (native browser feature) - Theme switching happens instantly - No need for runtime JavaScript to update colors - Variables cascade naturally with CSS specificity */