/* ======================================== VOLTUX — DESIGN SYSTEM VARIABLES Primary Brand: #1D9E75 (Green) ======================================== Usage: Import this file FIRST in all CSS files: @import url('variables.css'); OR link in HTML before other stylesheets ======================================== */ /* ======================================== 🎨 BRAND COLORS — Primary Palette ======================================== */ :root { /* Primary Green */ --green-50: #E8F7F1; --green-100: #D1F0E3; --green-200: #9FE1CB; /* Mid green */ --green-300: #6DD2B3; --green-400: #3BC39B; --green-500: #1D9E75; /* ⭐ PRIMARY BRAND */ --green-600: #0F6E56; /* Dark hover */ --green-700: #0A5A45; --green-800: #074634; --green-900: #053223; /* Accent / Bright */ --accent-bright: #2DFF9A; /* Favicon, highlights */ /* ======================================== 🔵 BLUE ACCENT (Business Cards) ======================================== */ --blue-50: #E6F1FB; --blue-100: #CCE3F7; --blue-200: #99C7EF; --blue-300: #66ABE7; --blue-400: #338FDF; --blue-500: #185FA5; /* Business icon bg */ --blue-600: #124A82; --blue-700: #0D3560; /* ======================================== 🟡 AMBER ACCENT (Maintenance Cards) ======================================== */ --amber-50: #FAEEDA; --amber-100: #F5DDB5; --amber-200: #EBBB6B; --amber-300: #E19921; --amber-400: #B87D1B; --amber-500: #854F0B; /* Maintenance icon */ --amber-600: #6A3F09; /* ======================================== 🟣 PURPLE ACCENT (Trust Bar) ======================================== */ --purple-500: #533B89; /* Support icon */ /* ======================================== ⚫ NEUTRAL COLORS — Text & Backgrounds ======================================== */ --dark-50: #f8fafc; /* Light background */ --dark-100: #f1f5f9; /* Hover bg, light sections */ --dark-200: #e2e8f0; /* Form borders */ --dark-300: #cbd5e1; --dark-400: #94a3b8; /* Light gray text */ --dark-500: #64748b; /* Secondary text */ --dark-600: #475569; /* Nav links */ --dark-700: #334155; --dark-800: #1e293b; /* Dark soft */ --dark-900: #0f172a; /* ⭐ Main dark / Footer / CTA bg */ /* ======================================== ⚪ WHITE & TRANSPARENT ======================================== */ --white: #ffffff; --white-80: rgba(255,255,255,0.8); --white-60: rgba(255,255,255,0.6); --white-50: rgba(255,255,255,0.5); --white-35: rgba(255,255,255,0.35); --white-20: rgba(255,255,255,0.2); --white-10: rgba(255,255,255,0.1); --white-08: rgba(255,255,255,0.08); /* ======================================== 🔵 ACCENT COLORS (Limited Use) ======================================== */ --blue-500: #0090e3; /* Cookie manage button */ --blue-600: #0077be; /* Blue hover */ /* ======================================== 🟡 FEEDBACK COLORS (States) ======================================== */ --success-50: #E8F7F1; --success-500: #1D9E75; --success-600: #0F6E56; --warning-50: #fef3c7; --warning-500: #92400e; --error-50: #fee2e2; --error-500: #991b1b; --info-50: #eff6ff; --info-500: #3b82f6; /* ======================================== 📐 SPACING SYSTEM ======================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ======================================== 🔤 TYPOGRAPHY ======================================== */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 40px; --text-5xl: 46px; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.7; /* ======================================== 🔲 BORDER RADIUS ======================================== */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* ======================================== 🌑 SHADOWS ======================================== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); --shadow-lg: 0 4px 24px rgba(0,0,0,0.08); --shadow-xl: 0 8px 32px rgba(0,0,0,0.12); --shadow-green: 0 4px 20px rgba(29,158,117,0.25); --shadow-green-lg: 0 6px 24px rgba(29,158,117,0.35); --shadow-green-xl: 0 8px 28px rgba(29,158,117,0.4); /* ======================================== ⚡ TRANSITIONS ======================================== */ --transition-fast: all 0.15s ease; --transition-base: all 0.25s ease; --transition-slow: all 0.4s ease; --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================== 📏 LAYOUT ======================================== */ --container-max: 1200px; --container-padding: 24px; --navbar-height: 64px; /* ======================================== 🎯 Z-INDEX SCALE ======================================== */ --z-dropdown: 100; --z-sticky: 500; --z-navbar: 1000; --z-modal: 2000; --z-tooltip: 3000; --z-cookie: 9999; } /* ======================================== 🌙 DARK MODE (Optional — Future Use) ======================================== */ @media (prefers-color-scheme: dark) { :root { /* Uncomment when implementing dark mode */ /* --bg-primary: var(--dark-900); */ /* --bg-secondary: var(--dark-800); */ /* --text-primary: var(--white); */ /* --text-secondary: var(--dark-400); */ } } /* ======================================== 🖨️ PRINT STYLES ======================================== */ @media print { :root { --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-green: none; } }