/* Design tokens — hypra.studio rebuild Source of truth: rebuild/_spec/*.json (computed styles of the deployed site). */ :root { /* Colors */ --bg: #000; --card: rgb(28, 28, 28); --card-deep: rgb(13, 13, 13); --tile: rgb(48, 48, 48); --border: rgb(46, 46, 46); --border-soft: rgba(255, 255, 255, 0.08); --outline: #3a3a3a; --text: rgb(247, 247, 247); --title: rgba(240, 240, 240, 0.96); --muted: rgb(143, 143, 143); --muted-strong: rgb(231, 231, 231); --faint: rgb(71, 71, 71); --nav-link: rgba(247, 247, 247, 0.65); --disc-title: rgb(219, 219, 219); /* Fonts (font-family names kept from the original export) */ --font-medium: ". Medium", ". Medium Placeholder", sans-serif; --font-book: ". Book", ". Book Placeholder", sans-serif; --font-demi: ". Demi", ". Demi Placeholder", sans-serif; --font-serif: "TWK Issey V1 Regular", "TWK Issey V1 Regular Placeholder", sans-serif; --font-inter: "Inter", "Inter Placeholder", sans-serif; --font-mono: "Fragment Mono", monospace; /* Iridescent button gradient (verbatim from computed style) */ --grad-iridescent: linear-gradient(112deg, rgb(217, 235, 255) -8%, rgb(235, 235, 235) 17.3652%, rgb(250, 255, 237) 33.6641%, rgb(237, 237, 237) 49.5337%, rgb(250, 255, 237) 65.9558%, rgb(249, 245, 255) 81.3767%, rgb(255, 224, 224) 108%); /* Layout */ --container: 1232px; --gutter: 24px; /* Motion */ --ease-appear: cubic-bezier(0.21, 0.58, 0.29, 0.96); /* Interactive states — "soft white halo" (system 1, validated in the hover-systems lab, since archived). One rule set reused by every clickable: buttons, nav links, footer links, small controls. Hover = faint outer glow + hairline that brightens. Active = the same halo, tighter and dimmer (short, legible click feedback). Focus-visible = same family, slightly stronger ring instead of the browser default. */ --halo-transition: 200ms ease; --halo-shadow-hover: 0 0 16px rgba(255, 255, 255, 0.14); --halo-shadow-active: 0 0 8px rgba(255, 255, 255, 0.09); --halo-shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 0 16px rgba(255, 255, 255, 0.14); --halo-border-hover: rgba(255, 255, 255, 0.32); --halo-text-hover: rgba(255, 255, 255, 0.92); } /* ========================================================= Light theme — ADDITIVE layer, opt-in via [data-theme="light"] on (js/theme.js + the inline anti-flash script). The dark defaults above are the source of truth and stay pixel-identical; this block only re-maps the theme tokens so the whole site flips by swapping variables, not rules. Palette rationale (not a mechanical inversion): - bg near-white but not pure #fff (#fbfbfb) — softer, less glare - cards a hair darker than bg so they still read as raised surfaces on a light page (dark mode lifts cards *up* from black; here we press them *down* from white) - text near-black (not pure #000) for a calmer contrast - borders light grey hairlines, still visible on the near-white bg - muted greys darkened enough to stay legible on light surfaces ========================================================= */ [data-theme="light"] { --bg: #fbfbfb; --card: rgb(244, 244, 244); --card-deep: rgb(237, 237, 237); --tile: rgb(228, 228, 228); --border: rgb(223, 223, 223); --border-soft: rgba(0, 0, 0, 0.09); --outline: #d2d2d2; --text: rgb(24, 24, 24); --title: rgba(17, 17, 17, 0.96); --muted: rgb(107, 107, 107); --muted-strong: rgb(38, 38, 38); --faint: rgb(163, 163, 163); --nav-link: rgba(17, 17, 17, 0.6); --disc-title: rgb(26, 26, 26); /* Halo — the white glow is invisible on a light page. Swap to a soft neutral-dark shadow (same "family": faint outer glow that firms up on hover, tighter on active, ring on focus). Text-hover darkens instead of brightening. */ --halo-shadow-hover: 0 0 16px rgba(0, 0, 0, 0.1); --halo-shadow-active: 0 0 8px rgba(0, 0, 0, 0.07); --halo-shadow-focus: 0 0 0 3px rgba(0, 0, 0, 0.14), 0 0 16px rgba(0, 0, 0, 0.08); --halo-border-hover: rgba(0, 0, 0, 0.28); --halo-text-hover: rgba(0, 0, 0, 0.92); }