/* ========================================================================== FXVPS — design tokens Every colour, size and radius in the theme resolves through this file. The palette is switched by data-palette on , set server-side from the Customizer, so there is no flash and no JavaScript dependency. ========================================================================== */ :root { /* ---- type ---- */ --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* A wide scale on purpose: the display sizes have to carry a headline the size the reference sets, while body text stays at a readable 16px. */ --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem); --step-0: clamp(0.94rem, 0.92rem + 0.1vw, 1rem); --step-1: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem); --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem); --step-4: clamp(2.05rem, 1.35rem + 3.1vw, 3.5rem); --step-5: clamp(2.6rem, 1.5rem + 4.9vw, 5.4rem); /* ---- rhythm ---- */ --gutter: 20px; --measure: 65ch; --wrap: 1180px; --wrap-narrow: 760px; --space-1: 6px; --space-2: 12px; --space-3: 20px; --space-4: 32px; --space-5: 52px; --space-6: 80px; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --ring: 0 0 0 1px var(--line); --shadow-lift: 0 24px 60px -34px rgb(0 0 0 / 0.75); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur: 0.18s; } /* ========================================================================== Palette A — Midnight Green (default) Brand green leads; the logo needs no change. ========================================================================== */ :root, :root[data-palette="a"] { --bg: #050B14; --bg-2: #080F1A; --bg-3: #0B1421; --console-bg: #02060C; --surface: rgb(255 255 255 / 0.035); --surface-2: rgb(255 255 255 / 0.06); --line: rgb(255 255 255 / 0.08); --line-strong: rgb(255 255 255 / 0.14); --ink: #F2F6FA; --ink-2: #9FB0C4; --ink-3: #64768C; --accent: #3DDC7F; --accent-ink: #04140B; --accent-soft: rgb(61 220 127 / 0.12); --accent-line: rgb(61 220 127 / 0.30); --accent-glow: rgb(61 220 127 / 0.22); --second: #38BDF8; --second-soft: rgb(56 189 248 / 0.14); --ok: #34D399; --warn: #FBBF24; --bad: #F87171; } /* ========================================================================== Palette B — Deep Navy Electric Closest to the reference; green demoted to success only. ========================================================================== */ :root[data-palette="b"] { --bg: #040B1A; --bg-2: #07122A; --bg-3: #0A1734; --console-bg: #010610; --surface: rgb(255 255 255 / 0.04); --surface-2: rgb(255 255 255 / 0.07); --line: rgb(255 255 255 / 0.07); --line-strong: rgb(255 255 255 / 0.15); --ink: #FFFFFF; --ink-2: #A3B3C9; --ink-3: #5E7190; --accent: #38BDF8; --accent-ink: #03121F; --accent-soft: rgb(56 189 248 / 0.11); --accent-line: rgb(56 189 248 / 0.32); --accent-glow: rgb(56 189 248 / 0.25); --second: #34D399; --second-soft: rgb(52 211 153 / 0.14); --ok: #34D399; --warn: #FBBF24; --bad: #F87171; } /* ========================================================================== Palette C — Carbon Emerald Neutral carbon base; photography and the logo carry the colour. ========================================================================== */ :root[data-palette="c"] { --bg: #0A0C0F; --bg-2: #101317; --bg-3: #161A20; --console-bg: #050608; --surface: rgb(255 255 255 / 0.04); --surface-2: rgb(255 255 255 / 0.07); --line: rgb(255 255 255 / 0.09); --line-strong: rgb(255 255 255 / 0.16); --ink: #F4F5F7; --ink-2: #A8AEB8; --ink-3: #6B727D; --accent: #00E0A4; --accent-ink: #00140E; --accent-soft: rgb(0 224 164 / 0.11); --accent-line: rgb(0 224 164 / 0.30); --accent-glow: rgb(0 224 164 / 0.20); --second: #A78BFA; --second-soft: rgb(167 139 250 / 0.14); --ok: #00E0A4; --warn: #FBBF24; --bad: #F87171; }