/* ============================================================ THE FORM ESCAPE — color kits Swap the whole palette by setting . Add a kit by copying a block and changing the 6 values. Preview any kit live with ?theme= in the URL. Every color below is a token; nothing in styles.css hardcodes a hex. ============================================================ */ :root { /* motion + shape tokens (kit-independent) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.36, 1); /* glide-and-settle */ --dur-slow: 1.2s; --dur-med: 0.8s; --dur-fast: 0.4s; --maxw: 1180px; --gutter: clamp(1.25rem, 5vw, 5rem); --section-y: clamp(4.75rem, 12vh, 9rem); --section-gap: clamp(2.5rem, 7vw, 5.5rem); --measure-body: 46ch; --measure-copy: 45ch; --font-serif: "Cormorant Garamond", Georgia, serif; --font-sans: "Jost", system-ui, sans-serif; } /* ---- INK (default) — warm near-black & white + taupe ---- */ :root, [data-theme="ink"] { --cream: #FAF9F5; /* page base */ --surface: #FFFFFF; /* cards / inputs */ --ink: #2E2A24; /* primary text + mark */ --copy: #5F574D; /* readable soft body */ --accent: #7C7264; /* taupe — inner arch, tracked labels */ --line: #E7E3DB; /* hairlines / borders */ --muted: #938C80; /* secondary text */ --error: #9F463D; /* restrained form error */ } /* ---- NOIR — pure black & white, no warmth ---- */ [data-theme="noir"] { --cream: #FAFAF8; --surface: #FFFFFF; --ink: #1A1A1A; --copy: #555550; --accent: #948F84; --line: #E6E6E2; --muted: #8C8C86; --error: #9F463D; } /* ---- SAGE — B&W + a whisper of muted green ---- */ [data-theme="sage"] { --cream: #FAF9F5; --surface: #FFFFFF; --ink: #33312A; --copy: #5F5A4D; --accent: #8B8A6B; --line: #E6E3DA; --muted: #8E897C; --error: #9F463D; } /* ---- CYPRESS — deeper forest green accent ---- */ [data-theme="cypress"] { --cream: #FAF9F5; --surface: #FFFFFF; --ink: #2C2C24; --copy: #53584C; --accent: #4F5B47; --line: #E4E4D9; --muted: #85897A; --error: #9F463D; } /* ---- NOCTURNE — reversed / dark, for an after-dark variant ---- */ [data-theme="nocturne"] { --cream: #211E1A; /* dark "page" */ --surface: #2A2620; --ink: #F3F0E8; /* light text + mark */ --copy: #D8D0C3; --accent: #B3A99A; --line: #3A352D; --muted: #9C958A; --error: #E1A49B; }