/* ============================================================ Design tokens — two palettes as CSS custom properties. Ink (light) lives on :root so a no-JS page renders correct light mode. Cyanotype (dark) overrides the SAME variable names, so all markup is emitted once and themed by swapping [data-theme] on . Values are verbatim from the handoff "Design Tokens" table. ============================================================ */ :root, :root[data-theme='ink'] { --sheet-bg: #fdfdfb; --ink: #26241f; --secondary: #45433c; --muted: #6f6a5e; --faint: #8a857a; --coord: #b5b0a4; --accent: #b3541e; --rule: rgba(38, 36, 31, 0.14); --field-fill: rgba(255, 255, 255, 0.45); --titleblock-fill: rgba(255, 255, 255, 0.55); --grid-fine: rgba(38, 36, 31, 0.09); --grid-coarse: rgba(38, 36, 31, 0.06); /* derived egg tokens (also themed) */ --tip-bg: var(--ink); --tip-fg: var(--sheet-bg); --pencil: #c0392b; /* red-pencil checker marks */ --coffee: rgba(120, 74, 38, 0.16); /* coffee-stain ring */ --stamp: var(--accent); --page-outside: #eceae3; /* area around the sheet */ } :root[data-theme='cyanotype'] { --sheet-bg: #16324f; --ink: #e8eef7; --secondary: #cbdcee; --muted: #9fc3e8; --faint: #7ba3cc; --coord: #5f83a8; --accent: #ffd479; --rule: rgba(232, 238, 247, 0.14); --field-fill: rgba(232, 238, 247, 0.05); --titleblock-fill: rgba(232, 238, 247, 0.06); --grid-fine: rgba(232, 238, 247, 0.09); --grid-coarse: rgba(232, 238, 247, 0.06); --tip-bg: var(--ink); --tip-fg: var(--sheet-bg); --pencil: #e06a5a; --coffee: rgba(210, 170, 110, 0.14); --stamp: var(--accent); --page-outside: #0f2438; }