/* ================================================================ Theme tokens. Every theme sets a full palette + type + shape so switching the [data-theme] attribute on restyles the whole page. Shared variable names — themes only change values: --c-primary / --c-accent brand colours --c-ink / --c-muted text --c-bg / --c-surface / --c-surface-alt / --c-header-bg / --c-line --c-on-primary --f-head / --f-body font families --f-h1 hero heading size --r-md / --r-lg radii --gloss 0-100, drives inner highlight + button sheen ================================================================ */ /* ---------- 01 Coastal — clean corporate, generous whitespace ---------- */ body[data-theme="coastal"] { --c-primary: #2E9BE6; --c-accent: #7ED8FF; --c-ink: #0B2942; --c-muted: #5A7189; --c-bg: #F5FAFE; --c-surface: #FFFFFF; --c-surface-alt: #EAF4FC; --c-header-bg: rgba(255,255,255,0.82); --c-line: #DCE8F2; --c-on-primary: #FFFFFF; --f-head: 'Manrope', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-h1: clamp(38px, 5.2vw, 68px); --r-md: 10px; --r-lg: 16px; --gloss: 40%; } /* ---------- 02 Freight — bold, high-contrast, technical ---------- */ body[data-theme="freight"] { --c-primary: #4FB6FF; --c-accent: #A9E1FF; --c-ink: #F3F8FC; --c-muted: #9AB4C9; --c-bg: #0A1826; --c-surface: #122336; --c-surface-alt: #0E1D2E; --c-header-bg: rgba(10,24,38,0.82); --c-line: #1E3348; --c-on-primary: #061421; --f-head: 'Space Grotesk', system-ui, sans-serif; --f-body: 'IBM Plex Sans', system-ui, sans-serif; --f-h1: clamp(42px, 6vw, 78px); --r-md: 4px; --r-lg: 6px; --gloss: 20%; } /* ---------- 03 Glass — heavy glassmorphism, glossy ---------- */ body[data-theme="glass"] { --c-primary: #3AB3FF; --c-accent: #B6ECFF; --c-ink: #0C2A43; --c-muted: #4D6B85; --c-bg: #DDF0FB; --c-surface: rgba(255,255,255,0.65); --c-surface-alt: rgba(213,236,252,0.7); --c-header-bg: rgba(255,255,255,0.5); --c-line: rgba(255,255,255,0.9); --c-on-primary: #FFFFFF; --f-head: 'Manrope', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-h1: clamp(38px, 5vw, 68px); --r-md: 14px; --r-lg: 22px; --gloss: 80%; } body[data-theme="glass"] { background: radial-gradient(900px 500px at 10% 10%, #C7E7FA, transparent 60%), radial-gradient(700px 400px at 90% 20%, #B4DDF7, transparent 60%), radial-gradient(600px 400px at 50% 90%, #DFF2FC, transparent 60%), #DDF0FB; background-attachment: fixed; } body[data-theme="glass"] .card, body[data-theme="glass"] .calc, body[data-theme="glass"] .quote, body[data-theme="glass"] .editor { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 60px -30px rgba(20, 60, 100, 0.35); } body[data-theme="glass"] .site-header { backdrop-filter: blur(20px) saturate(140%); } /* ---------- 04 Precision — editorial serif headings, grid-heavy ---------- */ body[data-theme="precision"] { --c-primary: #1E7AC6; --c-accent: #8DC7EE; --c-ink: #10233A; --c-muted: #5C7591; --c-bg: #FCFCFA; --c-surface: #FFFFFF; --c-surface-alt: #F2F5F9; --c-header-bg: rgba(252,252,250,0.9); --c-line: #E3E7EE; --c-on-primary: #FFFFFF; --f-head: 'Fraunces', Georgia, serif; --f-body: 'Inter', system-ui, sans-serif; --f-h1: clamp(40px, 5.6vw, 76px); --r-md: 4px; --r-lg: 4px; --gloss: 15%; } body[data-theme="precision"] h1, body[data-theme="precision"] h2 { letter-spacing: -0.02em; font-style: normal; } body[data-theme="precision"] .eyebrow { font-family: var(--f-body); } body[data-theme="precision"] .card, body[data-theme="precision"] .quote { border-left: 3px solid var(--c-primary); border-radius: 0; } body[data-theme="precision"] .section-head { border-top: 1px solid var(--c-line); padding-top: 24px; } /* ---------- 05 Horizon — magazine hero, big numbers, minimalist ---------- */ body[data-theme="horizon"] { --c-primary: #0E86D9; --c-accent: #6FC6F5; --c-ink: #071B2E; --c-muted: #4D6478; --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-surface-alt: #F0F7FC; --c-header-bg: rgba(255,255,255,0.94); --c-line: #E8EEF4; --c-on-primary: #FFFFFF; --f-head: 'Inter', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-h1: clamp(48px, 8vw, 104px); --r-md: 2px; --r-lg: 2px; --gloss: 25%; } body[data-theme="horizon"] h1 { font-weight: 800; letter-spacing: -0.035em; } body[data-theme="horizon"] .hero-stats strong { font-size: clamp(36px, 5vw, 56px); } body[data-theme="horizon"] .card { border: 0; border-top: 1px solid var(--c-ink); border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; } body[data-theme="horizon"] .card:hover { transform: none; box-shadow: none; }