/* The ratified design system — DESIGN.md made real, served to the app. Every value here traces to a table in DESIGN.md; change it there first. This is the token block of design/tokens.css; the component styles live with the markup they style (the HTML strings in api.py, for now). Dark follows the OS by default; data-theme="light|dark" on overrides it per device, and data-text="large|small" scales the type (DESIGN.md D8). */ :root { /* colour — light */ --surface: #faf6ef; --ink: #23201b; --ink-dim: #6d6459; --ink-placeholder: #6d6459; --ink-checked: #a89e91; /* D2: dim by intent; pending items never wear this */ --accent: #c2410c; /* D3: only where tapping does something */ --on-accent: #fff; --chip: #efe7d9; --rule: #e5dbc9; --edge: #e2d8c6; --box-line: #c4b8a4; --input-bg: #fff; --input-edge: #ddd0b8; --cat-ink: #6f6353; /* corrected from A1's #857763, which measured 4.05:1 */ /* type — D4: the serif is the voice everywhere */ --font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* space & shape */ --pad: 18px; --radius: 8px; /* motion — D6: check-off repeats, the finish fires once, nothing else pleases */ --t-check: 180ms; --t-finish: 450ms; --t-flash: 600ms; --t-toast: 160ms; } /* The dark palette appears twice below — once for the phone's preference, once for a forced data-theme="dark" — and the two blocks must stay identical. CSS cannot share one block between a media query and an attribute selector without light-dark(), which the low-end Android that D4 still owes a test on may not have. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #1c1a17; --ink: #f0e9dd; --ink-dim: #a89e8e; --ink-placeholder: #a89e8e; --ink-checked: #6f6759; --accent: #f97316; --on-accent: #1c1a17; --chip: #2b2823; --rule: #2e2a24; --edge: #322e28; --box-line: #554f45; --input-bg: #262320; --input-edge: #3a352e; --cat-ink: #9a8d78; } } :root[data-theme="dark"] { --surface: #1c1a17; --ink: #f0e9dd; --ink-dim: #a89e8e; --ink-placeholder: #a89e8e; --ink-checked: #6f6759; --accent: #f97316; --on-accent: #1c1a17; --chip: #2b2823; --rule: #2e2a24; --edge: #322e28; --box-line: #554f45; --input-bg: #262320; --input-edge: #3a352e; --cat-ink: #9a8d78; } /* D8: text size. The phone's own scaling still applies on top — these only move the base the rem scale hangs from. */ :root[data-text="large"] { font-size: 118.75%; } :root[data-text="small"] { font-size: 87.5%; } @media (prefers-reduced-motion: reduce) { :root { --t-check: 0ms; --t-finish: 0ms; --t-flash: 0ms; --t-toast: 0ms; } }