/* ============================================================ WHERE TO STAY — DESIGN SYSTEM VARIABLES ============================================================ All colors, spacing, typography, shadows, radii and animation values used throughout the platform. Dark mode is triggered by adding [data-theme="dark"] to the element. ============================================================ */ /* ------------------------------------------------------------ LIGHT MODE (Default) ------------------------------------------------------------ */ :root { /* ===== BRAND COLORS ===== */ /* Primary: Deep forest green — trust, Nigerian roots, hospitality */ --brand-primary: #1B4D3E; --brand-primary-light: #2D7A5F; --brand-primary-lighter: #4A9E7F; --brand-primary-dark: #0F3029; --brand-primary-darker: #082018; --brand-primary-50: #E8F3EF; --brand-primary-100: #C5DFD5; --brand-primary-200: #9CC9B8; --brand-primary-300: #6FB399; /* Secondary: Warm gold — premium, warmth, celebration */ --brand-secondary: #D4A843; --brand-secondary-light: #E8C46A; --brand-secondary-lighter: #F0D48F; --brand-secondary-dark: #B38A2E; --brand-secondary-darker: #8C6B22; --brand-secondary-50: #FBF6E8; --brand-secondary-100: #F4E7C1; /* Accent: Warm coral — energy, CTAs, warmth */ --brand-accent: #E85D3A; --brand-accent-light: #F07A5D; --brand-accent-lighter: #F49B84; --brand-accent-dark: #C4462A; --brand-accent-darker: #9E3620; --brand-accent-50: #FDEEE9; --brand-accent-100: #F9CFC1; /* ===== SEMANTIC COLORS ===== */ --color-success: #059669; --color-success-light: #10B981; --color-success-bg: #ECFDF5; --color-success-border: #A7F3D0; --color-warning: #D97706; --color-warning-light: #F59E0B; --color-warning-bg: #FFFBEB; --color-warning-border: #FDE68A; --color-error: #DC2626; --color-error-light: #EF4444; --color-error-bg: #FEF2F2; --color-error-border: #FCA5A5; --color-info: #2563EB; --color-info-light: #3B82F6; --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; /* ===== NEUTRAL PALETTE ===== */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F5F7; --neutral-150: #EEEEEE; --neutral-200: #E5E7EB; --neutral-300: #D1D5DB; --neutral-400: #9CA3AF; --neutral-500: #6B7280; --neutral-600: #4B5563; --neutral-700: #374151; --neutral-800: #1F2937; --neutral-900: #111827; --neutral-950: #030712; /* ===== SURFACE COLORS ===== */ --bg-body: #FAFAFA; --bg-surface: #FFFFFF; --bg-surface-elevated: #FFFFFF; --bg-surface-alt: #F5F5F7; --bg-surface-hover: #F0F0F2; --bg-overlay: rgba(15, 20, 25, 0.55); --bg-overlay-strong: rgba(15, 20, 25, 0.75); --bg-overlay-light: rgba(255, 255, 255, 0.9); --bg-glass: rgba(255, 255, 255, 0.85); /* ===== TEXT COLORS ===== */ --text-primary: #1A1A2E; --text-secondary: #4B5563; --text-tertiary: #6B7280; --text-muted: #9CA3AF; --text-inverse: #FFFFFF; --text-on-primary: #FFFFFF; --text-on-secondary: #1A1A2E; --text-on-accent: #FFFFFF; --text-link: #2D7A5F; --text-link-hover: #1B4D3E; /* ===== BORDER COLORS ===== */ --border-color: #E5E7EB; --border-color-light: #F0F0F2; --border-color-strong: #D1D5DB; --border-color-focus: #2D7A5F; --border-color-error: #FCA5A5; /* ===== SHADOWS ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.03); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.20); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-focus: 0 0 0 3px rgba(45, 122, 95, 0.20); --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.20); --shadow-brand: 0 8px 24px rgba(27, 77, 62, 0.15); --shadow-accent: 0 8px 24px rgba(232, 93, 58, 0.18); /* ===== SPACING SCALE ===== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ===== BORDER RADIUS ===== */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 40px; --radius-pill: 9999px; --radius-circle: 50%; /* ===== TYPOGRAPHY ===== */ /* Font families */ --font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; /* Font sizes (fluid where useful) */ --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 */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Fluid display sizes for hero/marketing */ --text-display-sm: clamp(2rem, 4vw + 1rem, 3rem); --text-display-md: clamp(2.5rem, 5vw + 1rem, 4rem); --text-display-lg: clamp(3rem, 6vw + 1rem, 5rem); --text-display-xl: clamp(3.5rem, 7vw + 1rem, 6.5rem); /* Font weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Line heights */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.85; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.015em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ===== Z-INDEX SCALE ===== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-tooltip: 800; --z-max: 9999; /* ===== TRANSITIONS ===== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-smooth: 500ms cubic-bezier(0.16, 1, 0.3, 1); /* ===== LAYOUT ===== */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-max: 1600px; --header-height: 72px; --header-height-mobile: 60px; --footer-height-approx: 400px; --sidebar-width: 280px; --sidebar-width-collapsed: 72px; /* ===== COMPONENT-SPECIFIC ===== */ /* Buttons */ --btn-padding-x-sm: 0.875rem; --btn-padding-y-sm: 0.5rem; --btn-padding-x-md: 1.25rem; --btn-padding-y-md: 0.75rem; --btn-padding-x-lg: 1.75rem; --btn-padding-y-lg: 1rem; --btn-padding-x-xl: 2rem; --btn-padding-y-xl: 1.125rem; --btn-radius: var(--radius-md); --btn-font-weight: var(--weight-semibold); /* Cards */ --card-padding: var(--space-6); --card-padding-sm: var(--space-4); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-lg); --card-bg: var(--bg-surface); --card-border: 1px solid var(--border-color); /* Forms */ --input-height: 48px; --input-height-sm: 40px; --input-height-lg: 56px; --input-padding-x: 1rem; --input-radius: var(--radius-md); --input-border: 1px solid var(--border-color); --input-border-focus: 1px solid var(--border-color-focus); --input-bg: var(--bg-surface); --input-bg-disabled: var(--neutral-100); /* Navigation */ --nav-bg: rgba(255, 255, 255, 0.95); --nav-bg-scrolled: rgba(255, 255, 255, 0.98); --nav-border: 1px solid var(--border-color-light); --nav-blur: saturate(180%) blur(20px); /* ===== GRADIENTS ===== */ --gradient-brand: linear-gradient(135deg, #1B4D3E 0%, #2D7A5F 100%); --gradient-brand-vivid: linear-gradient(135deg, #1B4D3E 0%, #2D7A5F 50%, #4A9E7F 100%); --gradient-accent: linear-gradient(135deg, #E85D3A 0%, #F07A5D 100%); --gradient-gold: linear-gradient(135deg, #D4A843 0%, #E8C46A 100%); --gradient-sunset: linear-gradient(135deg, #E85D3A 0%, #D4A843 100%); --gradient-hero: linear-gradient(135deg, rgba(27, 77, 62, 0.92) 0%, rgba(45, 122, 95, 0.85) 100%); --gradient-hero-dark: linear-gradient(180deg, rgba(15, 48, 41, 0.30) 0%, rgba(15, 48, 41, 0.85) 100%); --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.15) 100%); /* ===== SPECIAL EFFECTS ===== */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(16px); --blur-xl: blur(24px); --backdrop-blur: saturate(180%) blur(20px); } /* ------------------------------------------------------------ DARK MODE Activated by adding data-theme="dark" to ------------------------------------------------------------ */ [data-theme="dark"] { /* ===== BRAND COLORS (Slightly adjusted for dark backgrounds) ===== */ --brand-primary: #4A9E7F; --brand-primary-light: #6FB399; --brand-primary-lighter: #9CC9B8; --brand-primary-dark: #2D7A5F; --brand-primary-darker: #1B4D3E; --brand-primary-50: #0F3029; --brand-primary-100: #1B4D3E; --brand-primary-200: #2D7A5F; --brand-primary-300: #4A9E7F; --brand-secondary: #E8C46A; --brand-secondary-light: #F0D48F; --brand-secondary-lighter: #F5E3B4; --brand-secondary-dark: #D4A843; --brand-secondary-darker: #B38A2E; --brand-secondary-50: #2A2416; --brand-secondary-100: #3D3520; --brand-accent: #F07A5D; --brand-accent-light: #F49B84; --brand-accent-lighter: #F7BAA9; --brand-accent-dark: #E85D3A; --brand-accent-darker: #C4462A; --brand-accent-50: #2E1810; --brand-accent-100: #451F14; /* ===== SEMANTIC COLORS ===== */ --color-success: #10B981; --color-success-light: #34D399; --color-success-bg: rgba(16, 185, 129, 0.12); --color-success-border: rgba(16, 185, 129, 0.35); --color-warning: #F59E0B; --color-warning-light: #FBBF24; --color-warning-bg: rgba(245, 158, 11, 0.12); --color-warning-border: rgba(245, 158, 11, 0.35); --color-error: #EF4444; --color-error-light: #F87171; --color-error-bg: rgba(239, 68, 68, 0.12); --color-error-border: rgba(239, 68, 68, 0.35); --color-info: #3B82F6; --color-info-light: #60A5FA; --color-info-bg: rgba(59, 130, 246, 0.12); --color-info-border: rgba(59, 130, 246, 0.35); /* ===== NEUTRAL PALETTE (Inverted for dark mode) ===== */ --neutral-0: #0F1419; --neutral-50: #131820; --neutral-100: #1A1F2E; --neutral-150: #1F2536; --neutral-200: #242B3D; --neutral-300: #334155; --neutral-400: #475569; --neutral-500: #64748B; --neutral-600: #94A3B8; --neutral-700: #CBD5E1; --neutral-800: #E2E8F0; --neutral-900: #F1F5F9; --neutral-950: #F8FAFC; /* ===== SURFACE COLORS ===== */ --bg-body: #0F1419; --bg-surface: #1A1F2E; --bg-surface-elevated: #242B3D; --bg-surface-alt: #131820; --bg-surface-hover: #2A3244; --bg-overlay: rgba(0, 0, 0, 0.75); --bg-overlay-strong: rgba(0, 0, 0, 0.90); --bg-overlay-light: rgba(15, 20, 25, 0.85); --bg-glass: rgba(26, 31, 46, 0.85); /* ===== TEXT COLORS ===== */ --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-tertiary: #94A3B8; --text-muted: #64748B; --text-inverse: #1A1A2E; --text-on-primary: #FFFFFF; --text-on-secondary: #1A1A2E; --text-on-accent: #FFFFFF; --text-link: #6FB399; --text-link-hover: #9CC9B8; /* ===== BORDER COLORS ===== */ --border-color: #334155; --border-color-light: #242B3D; --border-color-strong: #475569; --border-color-focus: #4A9E7F; --border-color-error: rgba(239, 68, 68, 0.5); /* ===== SHADOWS (Deeper for dark mode) ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -2px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 10px 10px -5px rgba(0, 0, 0, 0.25); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.75); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-focus: 0 0 0 3px rgba(74, 158, 127, 0.35); --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.35); --shadow-brand: 0 8px 24px rgba(74, 158, 127, 0.25); --shadow-accent: 0 8px 24px rgba(240, 122, 93, 0.30); /* ===== COMPONENT-SPECIFIC ===== */ --card-bg: var(--bg-surface); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-xl); --input-bg: var(--bg-surface-alt); --input-bg-disabled: var(--neutral-100); --nav-bg: rgba(15, 20, 25, 0.90); --nav-bg-scrolled: rgba(15, 20, 25, 0.98); --nav-border: 1px solid var(--border-color-light); /* ===== GRADIENTS ===== */ --gradient-brand: linear-gradient(135deg, #2D7A5F 0%, #4A9E7F 100%); --gradient-brand-vivid: linear-gradient(135deg, #1B4D3E 0%, #4A9E7F 100%); --gradient-hero: linear-gradient(135deg, rgba(15, 48, 41, 0.85) 0%, rgba(27, 77, 62, 0.75) 100%); --gradient-hero-dark: linear-gradient(180deg, rgba(15, 20, 25, 0.30) 0%, rgba(15, 20, 25, 0.95) 100%); --gradient-surface: linear-gradient(180deg, #1A1F2E 0%, #0F1419 100%); --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); } /* ------------------------------------------------------------ RESPECT USER SYSTEM PREFERENCE If user hasn't explicitly set a theme, follow their OS ------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { /* Copy dark mode values here so system preference triggers dark */ --brand-primary: #4A9E7F; --brand-primary-light: #6FB399; --brand-primary-lighter: #9CC9B8; --brand-primary-dark: #2D7A5F; --brand-primary-darker: #1B4D3E; --brand-secondary: #E8C46A; --brand-accent: #F07A5D; --neutral-0: #0F1419; --neutral-50: #131820; --neutral-100: #1A1F2E; --neutral-200: #242B3D; --neutral-300: #334155; --neutral-400: #475569; --neutral-500: #64748B; --neutral-600: #94A3B8; --neutral-700: #CBD5E1; --neutral-800: #E2E8F0; --neutral-900: #F1F5F9; --bg-body: #0F1419; --bg-surface: #1A1F2E; --bg-surface-elevated: #242B3D; --bg-surface-alt: #131820; --bg-surface-hover: #2A3244; --bg-overlay: rgba(0, 0, 0, 0.75); --bg-glass: rgba(26, 31, 46, 0.85); --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-tertiary: #94A3B8; --text-muted: #64748B; --border-color: #334155; --border-color-light: #242B3D; --border-color-strong: #475569; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55); --nav-bg: rgba(15, 20, 25, 0.90); --nav-bg-scrolled: rgba(15, 20, 25, 0.98); --card-bg: #1A1F2E; --input-bg: #131820; } } /* ------------------------------------------------------------ REDUCED MOTION PREFERENCE Respect user's request for reduced animations ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; --transition-bounce: 0ms; --transition-smooth: 0ms; } } /* ------------------------------------------------------------ PRINT STYLES OVERRIDE ------------------------------------------------------------ */ @media print { :root { --bg-body: #FFFFFF; --bg-surface: #FFFFFF; --text-primary: #000000; --text-secondary: #333333; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } }