@layer tokens { :root { /* ---- COLOUR ------------------------------------------------ Volcanic. Neutrals are tinted toward the ember hue (~40) so nothing in the palette reads as a dead grey. Chroma drops as lightness approaches either extreme. */ --c-basalt: oklch(0.145 0.008 42); /* deepest surface */ --c-basalt-up: oklch(0.185 0.010 42); /* raised surface */ --c-basalt-hi: oklch(0.235 0.012 42); /* hairlines, wells */ --c-ash: oklch(0.545 0.014 52); /* muted body copy */ --c-ash-hi: oklch(0.705 0.016 58); /* active secondary */ --c-bone: oklch(0.935 0.014 78); /* primary text */ --c-ember: oklch(0.665 0.192 38); /* accent, 10% */ --c-ember-deep: oklch(0.505 0.150 34); --c-sulphur: oklch(0.805 0.128 82); /* secondary accent */ /* paint, overwritten by the colourway switcher */ --paint: oklch(0.255 0.014 42); --paint-hi: oklch(0.325 0.018 42); --paint-line: var(--c-sulphur); /* ---- SPACE (4pt) ------------------------------------------ */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ /* ---- TYPE -------------------------------------------------- */ --f-display: "Big Shoulders Display", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif; --f-body: "Hanken Grotesk", ui-sans-serif, sans-serif; --f-mono: "Martian Mono", ui-monospace, monospace; /* fluid modular scale, ratio ~1.33 */ --t-2xs: 0.6875rem; --t-xs: 0.8125rem; --t-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem); --t-md: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); --t-lg: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); --t-xl: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); --t-2xl: clamp(3.25rem, 1.9rem + 6.4vw, 8.5rem); --t-3xl: clamp(4rem, 1.4rem + 12vw, 15rem); /* ---- MOTION ------------------------------------------------ Exponential deceleration only. No bounce, no elastic. */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* quint */ --e-expo: cubic-bezier(0.19, 1, 0.22, 1); --e-inout: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 0.18s; --d-mid: 0.32s; --d-slow: 0.45s; --d-epic: 0.9s; /* ---- LAYOUT ------------------------------------------------ */ --gutter: clamp(1.25rem, 4vw, 4.5rem); --measure: 68ch; --nav-height: 74px; --rule: 1px solid var(--c-basalt-hi); } /* Colourway definitions. The switcher swaps a data attribute on ; nothing else in the codebase needs to know about paint. */ [data-paint="ashfall"] { --paint: oklch(0.255 0.014 42); --paint-hi: oklch(0.335 0.018 42); --paint-line: oklch(0.805 0.128 82); } [data-paint="sulphur"] { --paint: oklch(0.760 0.115 88); --paint-hi: oklch(0.840 0.098 90); --paint-line: oklch(0.255 0.020 60); } [data-paint="pyroclast"] { --paint: oklch(0.500 0.158 32); --paint-hi: oklch(0.598 0.170 36); --paint-line: oklch(0.930 0.030 80); } [data-paint="fumarole"] { --paint: oklch(0.375 0.049 168); --paint-hi: oklch(0.462 0.058 168); --paint-line: oklch(0.900 0.038 92); } }