/* Design tokens. The only place colors, type, and spacing are defined. Light palette on :root; dark overrides follow the OS unless the user has picked a theme explicitly (data-theme on ). */ :root { --ink: #16211f; --ink-2: #3b4743; --slate: #5f6b66; --paper: #faf9f5; --surface: #ffffff; --rule: #dcd9cf; --rule-soft: #ebe8e0; --hover: rgba(22, 33, 31, 0.04); --rail: #16211f; --rail-ink: #f2f0e9; --rail-muted: #a9b3ae; /* Data-mode badges. They sit on the rail, which is dark in both themes. */ --env-demo: #e0b85a; --env-local: #8fd0aa; --env-supabase: #9cc3e6; --ok: #2f6f4e; --bad: #a8431c; --warn: #99721a; --info: #2d5b86; --ok-bg: rgba(47, 111, 78, 0.08); --bad-bg: rgba(168, 67, 28, 0.08); --warn-bg: rgba(153, 114, 26, 0.1); --focus: #2d5b86; --font: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-display: clamp(26px, 3.6vw, 36px); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --radius: 3px; --content: 1240px; --rail-h: 48px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e8e6de; --ink-2: #c3c7c0; --slate: #96a19b; --paper: #121917; --surface: #18211e; --rule: #2c3733; --rule-soft: #1e2724; --hover: rgba(232, 230, 222, 0.05); --rail: #0c1211; --ok: #6fb08c; --bad: #de8560; --warn: #cfa43f; --info: #7fa9d3; --ok-bg: rgba(111, 176, 140, 0.12); --bad-bg: rgba(222, 133, 96, 0.12); --warn-bg: rgba(207, 164, 63, 0.12); --focus: #7fa9d3; } } :root[data-theme="dark"] { --ink: #e8e6de; --ink-2: #c3c7c0; --slate: #96a19b; --paper: #121917; --surface: #18211e; --rule: #2c3733; --rule-soft: #1e2724; --hover: rgba(232, 230, 222, 0.05); --rail: #0c1211; --ok: #6fb08c; --bad: #de8560; --warn: #cfa43f; --info: #7fa9d3; --ok-bg: rgba(111, 176, 140, 0.12); --bad-bg: rgba(222, 133, 96, 0.12); --warn-bg: rgba(207, 164, 63, 0.12); --focus: #7fa9d3; }