/* Altnyx — shared design tokens. One canonical vocabulary for the whole site. Pages link this file and reference these custom properties; the few pages with a distinct palette opt in via a theme class on : (default) → standard app/marketing palette (platform, pricing, blog…) .theme-home → homepage's warmer-grey palette Cascade order matters: light base first, then per-theme light overrides, then the dark base (so it wins for shared tokens in dark mode), then the dark per-theme overrides. */ :root { --blue:#1B5FB2; --blue-m:#2E7DD1; --blue-l:#E6F1FC; --blue-ll:#F0F7FF; --sky:#3A9CE8; --teal:#0E6B54; --teal-m:#1A9E76; --teal-l:#E0F4EE; --amber:#7D4B0C; --amber-m:#E8961E; --amber-l:#FDF0DC; --purple:#4B43B0; --purple-m:#7B74D8; --purple-l:#EDEEFE; --red:#9B2020; --red-m:#D94040; --red-l:#FDE8E8; --ink:#0C0C0E; --ink-2:#3F4354; --ink-3:#7B7F96; --sur:#ffffff; --sur-2:#F5F7FA; --sur-3:#EDF0F7; --sur-4:#E4E8F2; --bdr:rgba(12,12,14,.07); --bdr-s:rgba(12,12,14,.12); --bdr-h:rgba(12,12,14,.22); --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-2xl:32px; --font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace; --ease:cubic-bezier(.22,1,.36,1); --sh:0 1px 3px rgba(12,12,14,.05),0 8px 28px rgba(12,12,14,.07); --sh-h:0 2px 8px rgba(12,12,14,.05),0 20px 48px rgba(12,12,14,.10); --sh-c:0 1px 3px rgba(12,12,14,.06),0 8px 24px rgba(12,12,14,.07); } /* Homepage — warmer-grey surfaces, pure-grey inks, deeper blue (light) */ .theme-home { --ink:#0a0a0a; --ink-2:#4a4a4a; --ink-3:#8a8a8a; --sur-2:#f7f6f4; --sur-3:#f0ede8; --sur-4:#e8e4de; --bdr:rgba(10,10,10,.09); --bdr-h:rgba(10,10,10,.16); --blue:#185FA5; --blue-l:#E8F2FC; } /* Blog/marketing group — slightly stronger borders + tighter elevation (light) */ .theme-blog { --bdr:rgba(12,12,14,.08); --bdr-s:rgba(12,12,14,.14); --sh-h:0 2px 8px rgba(12,12,14,.06),0 16px 40px rgba(12,12,14,.10); } /* ── Dark base (wins over the light per-theme overrides above) ── */ [data-theme="dark"] { --blue:#2E7DD1; --blue-m:#4AABEA; --blue-l:#192C48; --blue-ll:#111E30; --sky:#4BBDF0; --teal:#1A9E76; --teal-m:#26C492; --teal-l:#0D2920; --amber:#E8961E; --amber-m:#F5B83D; --amber-l:#2A1E08; --purple:#7B74D8; --purple-m:#9B96E8; --purple-l:#1C1A38; --red:#D94040; --red-m:#EF6060; --red-l:#2A1010; --ink:#EDEDF0; --ink-2:#C0C4D4; --ink-3:#969BAF; --sur:#0E1018; --sur-2:#14171F; --sur-3:#1C2030; --sur-4:#242840; --bdr:rgba(237,237,240,.07); --bdr-s:rgba(237,237,240,.12); --bdr-h:rgba(237,237,240,.22); --sh:0 1px 3px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.4); --sh-h:0 2px 8px rgba(0,0,0,.3),0 20px 48px rgba(0,0,0,.5); --sh-c:0 1px 3px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4); } /* Homepage dark — darkens surfaces/inks/borders but keeps the light colour ramp */ [data-theme="dark"].theme-home { --ink:#efefef; --ink-2:#aaaaaa; --ink-3:#666666; --sur:#0c0c0e; --sur-2:#131316; --sur-3:#1c1c21; --sur-4:#25252c; --bdr:rgba(255,255,255,.07); --bdr-h:rgba(255,255,255,.14); --blue:#185FA5; --blue-m:#2E7DD1; --blue-l:rgba(24,95,165,.2); --teal:#0E6B54; --teal-m:#1A9E76; --teal-l:rgba(14,107,84,.2); --amber:#7D4B0C; --amber-m:#E8961E; --amber-l:rgba(125,75,12,.22); --purple:#4B43B0; --purple-m:#7B74D8; --purple-l:rgba(75,67,176,.22); --red:#9B2020; --red-m:#D94040; --red-l:rgba(155,32,32,.2); }