/* ========================================================================== CANADACORP — CSS VARIABLES & DESIGN TOKENS Light-First Theme with Architectural Precision & Dark Mode Support ========================================================================== */ :root { /* Color Palette — Light Mode (Default) */ --bg-primary: #F8F9FB; --bg-secondary: #FFFFFF; --bg-tertiary: #F1F4F9; --bg-card: #FFFFFF; --bg-card-hover: #FAFCFF; --bg-card-accent: #F4F7FB; --bg-hero: linear-gradient(180deg, #FFFFFF 0%, #F8F9FB 100%); --bg-dark-accent: #111827; --text-primary: #111827; --text-secondary: #475569; --text-muted: #94A3B8; --text-inverse: #FFFFFF; --border-color: #E2E8F0; --border-subtle: rgba(0, 0, 0, 0.06); --border-card: #E8ECF2; --border-highlight: rgba(197, 155, 39, 0.35); --accent-gold: #C59B27; --accent-gold-hover: #B58B17; --accent-gold-light: #E5C365; --accent-gold-soft: rgba(197, 155, 39, 0.10); --accent-gold-border: rgba(197, 155, 39, 0.25); --accent-blue: #1E3A8A; --accent-blue-soft: rgba(30, 58, 138, 0.08); --header-bg: rgba(255, 255, 255, 0.88); --header-scrolled: rgba(255, 255, 255, 0.98); --header-border: rgba(226, 232, 240, 0.85); --badge-bg: rgba(197, 155, 39, 0.10); --badge-text: #9A721D; --badge-border: rgba(197, 155, 39, 0.25); --input-bg: #FFFFFF; --input-border: #CBD5E1; --input-focus-border: #C59B27; --input-focus-ring: rgba(197, 155, 39, 0.18); /* Shadows */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10); --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.14); --shadow-gold: 0 10px 30px rgba(197, 155, 39, 0.20); --shadow-hover: 0 20px 45px rgba(15, 23, 42, 0.12); /* Glassmorphism & Overlays */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.4); --glass-blur: blur(16px); --hero-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 249, 251, 0.82) 60%, rgba(241, 244, 249, 0.6) 100%); --image-card-overlay: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.3) 50%, rgba(15, 23, 42, 0) 100%); /* Typography Scale */ --font-heading: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 1.875rem; /* 30px */ --fs-3xl: 2.25rem; /* 36px */ --fs-4xl: 3rem; /* 48px */ --fs-5xl: 3.75rem; /* 60px */ --fs-6xl: 4.5rem; /* 72px */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.12; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.7; /* Spacing System */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; --section-py: clamp(4.5rem, 8vw, 7.5rem); /* Layout Containers */ --container-max: 1280px; --container-wide: 1400px; --container-narrow: 920px; /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* Transitions */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --transition-fast: all var(--duration-fast) var(--ease-smooth); --transition-normal: all var(--duration-normal) var(--ease-smooth); --transition-spring: all var(--duration-slow) var(--ease-spring); --header-height: 82px; } /* ========================================================================== Dark Mode Theme Overrides ========================================================================== */ [data-theme="dark"] { --bg-primary: #0B0F17; --bg-secondary: #111726; --bg-tertiary: #172033; --bg-card: #121A2C; --bg-card-hover: #19233B; --bg-card-accent: #151E33; --bg-hero: linear-gradient(180deg, #0B0F17 0%, #111726 100%); --bg-dark-accent: #080B10; --text-primary: #F8FAFC; --text-secondary: #94A3B8; --text-muted: #64748B; --text-inverse: #0B0F17; --border-color: rgba(255, 255, 255, 0.10); --border-subtle: rgba(255, 255, 255, 0.05); --border-card: rgba(255, 255, 255, 0.08); --border-highlight: rgba(226, 183, 75, 0.40); --accent-gold: #E2B74B; --accent-gold-hover: #F0CA68; --accent-gold-light: #FAD982; --accent-gold-soft: rgba(226, 183, 75, 0.15); --accent-gold-border: rgba(226, 183, 75, 0.30); --accent-blue: #3B82F6; --accent-blue-soft: rgba(59, 130, 246, 0.12); --header-bg: rgba(11, 15, 23, 0.88); --header-scrolled: rgba(17, 23, 38, 0.98); --header-border: rgba(255, 255, 255, 0.08); --badge-bg: rgba(226, 183, 75, 0.15); --badge-text: #F0CA68; --badge-border: rgba(226, 183, 75, 0.30); --input-bg: #172033; --input-border: rgba(255, 255, 255, 0.15); --input-focus-border: #E2B74B; --input-focus-ring: rgba(226, 183, 75, 0.25); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.8); --shadow-gold: 0 10px 30px rgba(226, 183, 75, 0.22); --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.7); --glass-bg: rgba(18, 26, 44, 0.75); --glass-border: rgba(255, 255, 255, 0.08); --hero-overlay: linear-gradient(135deg, rgba(11, 15, 23, 0.94) 0%, rgba(17, 23, 38, 0.86) 60%, rgba(23, 32, 51, 0.7) 100%); --image-card-overlay: linear-gradient(to top, rgba(11, 15, 23, 0.95) 0%, rgba(11, 15, 23, 0.4) 50%, rgba(11, 15, 23, 0) 100%); }