/* Broadstack brand tokens. Source: branding.md, palette and colour-scheme sections. */ :root { /* Dark scheme — the default. */ --bstk-node: #5782bb; --bstk-sat-mid: #7fa3d4; --bstk-sat-light: #a9c2e2; --bstk-sat-arc: #5782bb; --bstk-orb: #bdd2ec; --bstk-type: #ffffff; --bstk-bg: #2c3344; /* Derived from the palette, named for the job they do here. */ --bstk-bg-raised: #484c59; --bstk-body: #e8eaf1; --bstk-band-1: #4c5c96; --bstk-band-2: #45558d; --bstk-band-3: #3f4e85; --bstk-band-4: var(--bstk-bg); /* The mark's own measurements, reused as the page's structural units. */ --bstk-link-width: 4.5px; --bstk-radius-primary: 19.8; --bstk-track-wordmark: 0.172em; } /* The light scheme. --bstk-node and --bstk-orb are fixed across both. data-theme on is the splash component's only contract and beats the media query; this site sets data-theme="dark" because its bands are periwinkle and do not invert. */ html[data-theme="light"], .on-light { --bstk-sat-mid: #6b92c8; --bstk-sat-light: #7fa3d4; --bstk-sat-arc: #425a80; --bstk-type: #2c3344; --bstk-bg: #ffffff; --bstk-body: #2c3344; } @media (prefers-color-scheme: light) { html:not([data-theme]) { --bstk-sat-mid: #6b92c8; --bstk-sat-light: #7fa3d4; --bstk-sat-arc: #425a80; --bstk-type: #2c3344; --bstk-bg: #ffffff; --bstk-body: #2c3344; } }