/* brand/tokens.css — the ONLY place brand values are defined. Palette validated with the dataviz validator: worst adjacent CVD separation dE 12.0 against a floor of 8. Order is fixed. Re-run the validator before changing any series value. THEME: light is the default, unconditionally. The OS `prefers-color-scheme` preference is deliberately NOT consulted — the public surfaces are paper- first by design, and a visitor on a dark-mode OS must still land on the page the owner designed. An explicit `data-theme="dark"` on opts in; the toggle in sites/public/src/assets/theme.js sets it and persists the choice. The Lattice register carries the design language of the workshop hub (docs/materials/source/longevity-v2-site): warm paper ground, Georgia display face, coral accent, dashed instrument rules and a paper grain. Those values live HERE, not in public.css, so tokens stay the single source of truth and public.css stays free of colour literals. */ :root { color-scheme: light; /* chart series — dark ground */ --series-1: #0F9C8E; --series-2: #C87A28; --series-3: #7C7FE0; --series-4: #C85A7C; --series-5: #5E8FC7; /* chart series — light ground */ --series-1-light: #00897B; --series-2-light: #B5701A; --series-3-light: #5A5ED0; --series-4-light: #B8465F; /* Semantic status. NOT chart series: the series palette's guarantee is adjacent-hue separation for categorical data, which is not what a correct/incorrect signal needs. These are chosen for legibility instead — every one clears 4.5:1 for small text against BOTH --ground and --raised, in both registers and both themes, and --ok/--warn differ in lightness so the pair survives greyscale. brand/tokens.test.mjs measures all of it. */ --ok: #3FC8AE; --warn: #D4708D; --ok-light: #00695C; --warn-light: #8E243D; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; /* Type scale — the hub's, so the two surfaces read as one company. --step-4 is its section heading (2.5→5.1rem) and --step-5 its hero display (3.2→8rem); the smaller steps are its body, lede and subtitle. */ --step--1: clamp(.72rem, .69rem + .14vw, .8rem); --step-0: clamp(1rem, .95rem + .18vw, 1.11rem); --step-1: clamp(1.05rem, .99rem + .3vw, 1.3rem); --step-2: clamp(1.35rem, 1.15rem + 1vw, 2rem); --step-3: clamp(1.6rem, 1.15rem + 2.2vw, 3.2rem); --step-4: clamp(2.5rem, 5vw, 5.1rem); --step-5: clamp(3.2rem, 8vw, 8rem); /* No font FILES anywhere: every face is a system stack, exactly as the hub does it. This is what makes the surfaces work offline. */ --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif; --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --leading-display: .93; --leading-heading: 1.02; --leading-body: 1.7; --tracking-display: -.055em; --tracking-caps: .14em; --measure: 65ch; --content: 78rem; --gutter: clamp(1rem, 4vw, 4rem); --band-pad: clamp(4.5rem, 8vw, 8rem); --hero-pad: clamp(3.5rem, 8vw, 7rem); --ease: cubic-bezier(.22, 1, .36, 1); --radius: 4px; /* Decorative ground textures. Registers that want none simply leave these. */ --wash: none; --grain: none; --grain-blend: normal; --grain-opacity: 0; } /* Light is the DEFAULT theme, regardless of the OS preference. Anything that is not explicitly dark is light — including a document with no data-theme at all, which is what the page renders as if scripting is off. */ :root:not([data-theme="dark"]) { --series-1: var(--series-1-light); --series-2: var(--series-2-light); --series-3: var(--series-3-light); --series-4: var(--series-4-light); --ok: var(--ok-light); --warn: var(--warn-light); } /* ---- register: Lattice (public site) — light, the default ---- */ [data-register="lattice"] { --ground: #F4EFE5; --raised: #FBF7ED; --ink: #102625; --ink-2: #52615F; --accent: #E7402C; --accent-text: #B92F21; --accent-fill: #B92F21; --accent-ink: #FFFDF8; --accent-soft: #F5D0C4; --line: rgba(16,38,37,.22); --line-soft: rgba(16,38,37,.10); --radius: 999px; --radius-surface: 1.25rem; /* cards, panels, multi-line inputs — --radius is for pill controls */ --shadow: 0 18px 60px rgba(27,39,36,.10); --shadow-lift: 0 10px 26px rgba(16,38,37,.14); --wash: radial-gradient(circle at 18% 8%, rgba(255,255,255,.60), transparent 30rem), radial-gradient(circle at 83% 35%, rgba(217,199,168,.17), transparent 34rem); --grain: repeating-radial-gradient(circle at 0 0, transparent 0 2px, rgba(69,54,35,.07) 2.5px 3px, transparent 3.5px 9px), repeating-linear-gradient(97deg, transparent 0 23px, rgba(48,52,43,.035) 24px 25px, transparent 26px 49px); --grain-blend: multiply; --grain-opacity: .26; } /* ---- register: Instrument (companion) — light, the default ---- */ [data-register="instrument"] { --ground: #F5F7F8; --raised: #EAEEF0; --ink: #0E1417; --ink-2: #4C5A61; --accent: #00897B; --accent-text: #00695C; --accent-fill: #00695C; --accent-ink: #FFFFFF; --accent-soft: #CFE6E2; --line: rgba(14,20,23,.16); --line-soft: rgba(14,20,23,.08); --radius: 3px; --radius-surface: 3px; /* Instrument stays angular: surfaces and controls match */ --shadow: 0 10px 30px rgba(14,20,23,.10); --shadow-lift: 0 6px 18px rgba(14,20,23,.16); } /* Explicit theme choice must also govern chart series, not only ground and ink. Without these, toggling the theme against the default leaves charts on the other ground's palette. */ :root[data-theme="light"] { --series-1: var(--series-1-light); --series-2: var(--series-2-light); --series-3: var(--series-3-light); --series-4: var(--series-4-light); --ok: var(--ok-light); --warn: var(--warn-light); } :root[data-theme="dark"] { color-scheme: dark; --series-1: #0F9C8E; --series-2: #C87A28; --series-3: #7C7FE0; --series-4: #C85A7C; --series-5: #5E8FC7; --ok: #3FC8AE; --warn: #D4708D; } :root[data-theme="light"] [data-register="lattice"], :root[data-theme="light"][data-register="lattice"] { --ground: #F4EFE5; --raised: #FBF7ED; --ink: #102625; --ink-2: #52615F; --accent: #E7402C; --accent-text: #B92F21; --accent-fill: #B92F21; --accent-ink: #FFFDF8; --accent-soft: #F5D0C4; --line: rgba(16,38,37,.22); --line-soft: rgba(16,38,37,.10); --shadow: 0 18px 60px rgba(27,39,36,.10); --shadow-lift: 0 10px 26px rgba(16,38,37,.14); --wash: radial-gradient(circle at 18% 8%, rgba(255,255,255,.60), transparent 30rem), radial-gradient(circle at 83% 35%, rgba(217,199,168,.17), transparent 34rem); --grain: repeating-radial-gradient(circle at 0 0, transparent 0 2px, rgba(69,54,35,.07) 2.5px 3px, transparent 3.5px 9px), repeating-linear-gradient(97deg, transparent 0 23px, rgba(48,52,43,.035) 24px 25px, transparent 26px 49px); --grain-blend: multiply; --grain-opacity: .26; } :root[data-theme="light"] [data-register="instrument"], :root[data-theme="light"][data-register="instrument"] { --ground: #F5F7F8; --raised: #EAEEF0; --ink: #0E1417; --ink-2: #4C5A61; --accent: #00897B; --accent-text: #00695C; --accent-fill: #00695C; --accent-ink: #FFFFFF; --accent-soft: #CFE6E2; --line: rgba(14,20,23,.16); --line-soft: rgba(14,20,23,.08); } /* Dark is a chosen counterpart to the paper, not an inversion of it: the same warm-teal ink the light theme prints WITH becomes the ground it prints ON. */ :root[data-theme="dark"] [data-register="lattice"], :root[data-theme="dark"][data-register="lattice"] { --ground: #0E1B1A; --raised: #172523; --ink: #F4EFE5; --ink-2: #9FADA9; --accent: #FF6B52; --accent-text: #FF8B75; --accent-fill: #FF6B52; --accent-ink: #0E1B1A; --accent-soft: #7A3325; --line: rgba(244,239,229,.20); --line-soft: rgba(244,239,229,.09); --shadow: 0 18px 60px rgba(0,0,0,.55); --shadow-lift: 0 10px 26px rgba(0,0,0,.45); --wash: radial-gradient(circle at 18% 8%, rgba(143,197,187,.07), transparent 30rem), radial-gradient(circle at 83% 35%, rgba(231,64,44,.09), transparent 34rem); --grain: repeating-radial-gradient(circle at 0 0, transparent 0 2px, rgba(226,240,236,.055) 2.5px 3px, transparent 3.5px 9px), repeating-linear-gradient(97deg, transparent 0 23px, rgba(226,240,236,.03) 24px 25px, transparent 26px 49px); --grain-blend: screen; --grain-opacity: .5; } :root[data-theme="dark"] [data-register="instrument"], :root[data-theme="dark"][data-register="instrument"] { --ground: #0B0F12; --raised: #141A1E; --ink: #DDE5E8; --ink-2: #93A2A9; --accent: #0F9C8E; --accent-text: #3FC8AE; --accent-fill: #0F9C8E; --accent-ink: #04120F; --accent-soft: #14322D; --line: rgba(221,229,232,.16); --line-soft: rgba(221,229,232,.08); --shadow: 0 14px 40px rgba(0,0,0,.55); --shadow-lift: 0 8px 22px rgba(0,0,0,.45); }