/* ============================================================= 22 SEO — CSS Custom Properties Dark mode default, light mode via [data-theme="light"] ============================================================= */ :root { --sseo-max-width: 1200px; --sseo-breakpoint: 992px; /* Dark mode defaults (applied when no preference or dark preferred) */ --sseo-primary: #3B6FF5; --sseo-secondary: #2FA37E; --sseo-accent: #5EA2FF; --sseo-cta: #F4B840; --sseo-bg: #0F1722; --sseo-surface: #182230; --sseo-surface-hover: #1F2C3D; --sseo-text: #E6EDF3; --sseo-text-muted: #9BA8B4; --sseo-border: #2A3A4D; /* Spacing scale */ --sseo-space-xs: 0.25rem; --sseo-space-sm: 0.5rem; --sseo-space-md: 1rem; --sseo-space-lg: 1.5rem; --sseo-space-xl: 2rem; --sseo-space-2xl: 3rem; --sseo-space-3xl: 4rem; /* Typography */ --sseo-font-base: 'Inter', system-ui, -apple-system, sans-serif; --sseo-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --sseo-font-size: 1rem; --sseo-line-height: 1.65; --sseo-letter-space: 0; /* Border radius */ --sseo-radius-sm: 4px; --sseo-radius: 8px; --sseo-radius-lg: 12px; --sseo-radius-xl: 20px; --sseo-radius-full: 9999px; /* Shadows */ --sseo-shadow-sm: 0 1px 3px rgba(0,0,0,.3); --sseo-shadow: 0 4px 16px rgba(0,0,0,.4); --sseo-shadow-lg: 0 10px 40px rgba(0,0,0,.5); /* Transitions */ --sseo-transition: 0.2s ease; --sseo-transition-slow: 0.4s ease; /* Z-index scale */ --sseo-z-dropdown: 100; --sseo-z-sticky: 200; --sseo-z-modal: 300; --sseo-z-toast: 400; /* Gutter */ --sseo-gutter: 1.5rem; } /* ============================================================= Light mode — applied via [data-theme="light"] on ============================================================= */ [data-theme="light"] { --sseo-primary: #2B5CE6; --sseo-secondary: #1F8C6A; --sseo-accent: #3B6FF5; --sseo-cta: #E5A020; --sseo-bg: #F5F7FA; --sseo-surface: #FFFFFF; --sseo-surface-hover: #EEF1F6; --sseo-text: #1A2332; --sseo-text-muted: #5A6475; --sseo-border: #DEE2E8; --sseo-shadow-sm: 0 1px 3px rgba(0,0,0,.08); --sseo-shadow: 0 4px 16px rgba(0,0,0,.12); --sseo-shadow-lg: 0 10px 40px rgba(0,0,0,.16); } /* ============================================================= System color scheme preference (before JS toggle loads) ============================================================= */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --sseo-primary: #2B5CE6; --sseo-secondary: #1F8C6A; --sseo-accent: #3B6FF5; --sseo-cta: #E5A020; --sseo-bg: #F5F7FA; --sseo-surface: #FFFFFF; --sseo-surface-hover: #EEF1F6; --sseo-text: #1A2332; --sseo-text-muted: #5A6475; --sseo-border: #DEE2E8; --sseo-shadow-sm: 0 1px 3px rgba(0,0,0,.08); --sseo-shadow: 0 4px 16px rgba(0,0,0,.12); --sseo-shadow-lg: 0 10px 40px rgba(0,0,0,.16); } } /* ============================================================= 5ths column classes (Bootstrap doesn't have these) ============================================================= */ @media (min-width: 992px) { .sseo-col-lg-1-5 { flex: 0 0 auto; width: 20%; } .sseo-col-lg-2-5 { flex: 0 0 auto; width: 40%; } .sseo-col-lg-3-5 { flex: 0 0 auto; width: 60%; } .sseo-col-lg-4-5 { flex: 0 0 auto; width: 80%; } }