/* ========================================================================== tokens.css — the design system This file is the single source of truth for every visual decision in the lab. No component file is allowed to invent its own color, spacing, or font size — everything points back here. Why this matters: consistency is what makes a design feel "designed". When every gap is pulled from one spacing scale and every color from one palette, pages feel calm and intentional even before you add any decoration. When values are picked ad hoc (13px here, 15px there, five slightly different grays), pages feel messy and nobody can say why. THEMING: colors live in two blocks — the light theme in :root, and a dark override in [data-theme="dark"]. Only COLOR tokens change between themes. Spacing, type, shape, and motion are theme-independent, so they are defined once and never repeated. ========================================================================== */ /* Keep these as ordinary inherited custom properties. A theme change swaps their values atomically; the shared chrome animates between complete page snapshots rather than interpolating ink, paper, and borders separately. That keeps every visible region internally consistent throughout a flip. */ :root { /* Tells the browser which theme we're in, so native UI (scrollbars, form controls) matches the page instead of fighting it. */ color-scheme: light; /* ------------------------------------------------------------------ COLOR — light theme A monochrome palette: neutral grays plus one "accent" that is simply near-black. Hierarchy comes from contrast and weight, not from hue. ------------------------------------------------------------------ */ --paper: #f4f4f3; /* page background — a soft neutral, not stark white */ --surface: #ffffff; /* cards and specimen stages sit on pure white, so they read as "raised" above the paper */ --ink: #1a1a1a; /* main text — near-black. Pure #000 on light backgrounds is harsher than it needs to be */ --ink-muted: #6b6b6b; /* secondary text — still passes contrast on paper */ --line: #e4e4e2; /* hairline borders and the dot grid */ --line-strong: #b0b0ad; /* borders that must be clearly visible (e.g. the secondary button outline) */ /* The accent — near-black with a darkness ramp. Interactive elements get DARKER as you press them (hover → active), like a physical button moving away from the light. */ --accent: #262626; /* resting state */ --accent-strong: #111111; /* hover */ --accent-deep: #000000; /* active (pressed) */ --accent-soft: #eaeaea; /* faint tint, for hover on outline/ghost styles */ --accent-contrast: #ffffff; /* text ON the accent (primary button label) — flips to dark in the dark theme, where the accent itself is light */ /* The one hue in the whole lab: a gold reserved for the header's star easter egg. Nothing else may use it — one splash of color stays a delight; a second one starts a palette. */ --gold: #eab308; /* Shadows are for elevation, not decoration. Soft and barely-there: if you notice the shadow itself, it's too strong. Defined here (not in SHAPE & DEPTH) because they change with the theme. Three steps, by object size: sm for chips, md for cards, lg for large exhibit pieces — big objects need bigger, softer shadows or they look pasted on rather than resting. */ /* Each shadow leads with an invisible inset layer. It does nothing in the light theme — it's there so the list SHAPE matches the dark theme's (which uses that slot for its lit top rim): CSS can only crossfade two shadows smoothly when their lists line up layer for layer, inset with inset. Without the placeholder, every theme switch would snap the shadows instead of fading them. */ /* md and lg also exist as FIXED aliases (-light / -dark) that never flip with the theme. They're for elements that pre-paint BOTH themes' shadows at once and crossfade opacity instead of transitioning box-shadow: opacity runs on the GPU compositor, while a box-shadow transition re-blurs these big soft layers on the CPU every frame — cheap on a desktop, visible jank on a phone. (The sun-moon toggle does this; see its ::after.) */ --shadow-md-light: inset 0 1px 0 rgba(255, 255, 255, 0), 0 2px 6px rgba(0, 0, 0, 0.07), 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-lg-light: inset 0 1px 0 rgba(255, 255, 255, 0), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.08); --shadow-md-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg-dark: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.4), 0 32px 64px rgba(0, 0, 0, 0.35); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: var(--shadow-md-light); --shadow-lg: var(--shadow-lg-light); /* ------------------------------------------------------------------ TYPE Three faces, three jobs: display — personality, used sparingly at large sizes body — quiet and readable, does most of the work mono — labels, tokens, annotations ("the lab equipment") ------------------------------------------------------------------ */ --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif; --font-body: "Instrument Sans", "Segoe UI", sans-serif; --font-mono: "Spline Sans Mono", Consolas, monospace; /* Type scale — each step is meaningfully bigger than the last. If two sizes are only 1px apart, readers can't tell them apart, so the difference communicates nothing. */ --text-xs: 0.8125rem; /* 13px — annotations, chips */ --text-sm: 0.9375rem; /* 15px — secondary text */ --text-md: 1.0625rem; /* 17px — body */ --text-lg: 1.375rem; /* 22px — section headings */ --text-xl: 2rem; /* 32px — page titles */ --text-2xl: 3rem; /* 48px — the homepage headline */ /* ------------------------------------------------------------------ SPACING One scale, base unit 4px. Every margin, padding, and gap in the lab is one of these values — never 13px, never 22px. ------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ------------------------------------------------------------------ SHAPE & DEPTH ------------------------------------------------------------------ */ --radius-sm: 6px; /* small controls: chips, swatches */ --radius-md: 10px; /* buttons, notes */ --radius-lg: 16px; /* cards, specimen stages */ /* ------------------------------------------------------------------ MOTION One duration for color changes, one for movement. Fast enough to feel responsive, slow enough to be perceived. ------------------------------------------------------------------ */ --speed-color: 120ms; --speed-move: 80ms; } /* ========================================================================== DARK THEME Applied when . A tiny script in each page's sets that attribute from your saved choice (localStorage) or, failing that, your OS preference — so the theme is decided before the first paint and the page never flashes the wrong colors. Dark mode is not just "invert everything": surfaces get LIGHTER as they rise (dark paper, lighter cards), and the accent ramp flips — the primary button is light, and pressing it makes it dimmer, which still reads as "moving away from the light". ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --paper: #121212; /* the page floor — dark, but not pure black, so shadows and lifted surfaces still register */ --surface: #1c1c1c; /* cards sit slightly lighter than the paper — in the dark, "raised" means "catches more light" */ --ink: #f2f2f2; /* near-white text — pure #fff glows harshly on dark backgrounds */ --ink-muted: #a3a3a3; --line: #2a2a2a; --line-strong: #4d4d4d; /* The accent ramp, mirrored: light resting state, dimmer as pressed. */ --accent: #ececec; --accent-strong: #d6d6d6; --accent-deep: #bfbfbf; --accent-soft: #262626; --accent-contrast: #111111; /* dark label on the light button */ /* The stars' gold, a notch brighter so it reads on the dark paper */ --gold: #facc15; /* Dark shadows can't read on a dark floor — black on near-black is invisible. So elevation flips with the light (see the note above: raised means CATCHES MORE LIGHT): each step pairs a faint top edge highlight — the rim where an object catches the room's light — with the dark spread below. The higher the step, the brighter the rim. */ --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: var(--shadow-md-dark); --shadow-lg: var(--shadow-lg-dark); }