/* AMS-OS design tokens, v0.1. * * Settled with Tabitha on 24 August 2026, task 433ffe9b. This is the token * layer only: families, palette, scales and the semantic pairs that carry an * accessibility guarantee. Component shapes stay in app.css. * * It is a separate file on purpose. Ben's design-language pass supersedes this * one when it happens, and a swap is cleaner than an unpick. * * WHERE EACH VALUE COMES FROM, so a later session does not have to guess: * * - The nine brand colours are BYTE-IDENTICAL to chofski/design-system/ * colors_and_type.css. They were checked, not copied on faith. Nothing has * drifted between the design system, the demo and this file. * * - The teal ramp, the functional status ramp, the chart neutrals and the * categorical series are lifted from the demo, where they live inside * `#view-pipeline` as a view-scoped override, NOT in its `:root`. They are * promoted here because the brand has exactly one teal and a UI needs a * scale, and because sage and ochre cannot carry the word "critical". * * - What the demo's scoped block ALSO does, and what this file deliberately * does not follow: it redefines --white to #ffffff, introduces a cooler * --off-white #f4f7f8, repoints --error to #a85a4a, and sets the page text * and sidebar to teal. Promoting those would have swapped the whole app's * ground from warm to cool and its sidebar from ink to teal, which nobody * decided and which was never the demo's own default. They stay scoped. * * - The contrast-safe pairs at the bottom were MEASURED, not chosen by eye. * Every ratio in a comment below is a real WCAG 2.1 figure, computed * against the actual composited background the text sits on, which for a * chip is its own tint over the page and not the page itself. That * distinction is the whole reason three chips were failing silently. */ /* --------------------------------------------------------------------------- Type Instrument Serif is DISPLAY ONLY: page titles, the wordmark, section headings. It never touches body text and it never touches a number. An FD reading a rate table needs Inter's figures, not a display serif's. It ships in ONE weight, 400, and has no bold. Asking for 600 makes the browser synthesise a bold by smearing the outlines, which looks broken, so font-synthesis is switched off as a guard rather than a preference. Self-hosted, like Fraunces in the design system: no external request, and the app keeps working with no network to Google. --------------------------------------------------------------------------- */ @font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Regular-latin.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Regular-latin-ext.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter, variable, self-hosted. Until now the app asked for Inter by name and * shipped no font file at all, so unless a machine happened to have Inter * installed the whole product was rendering in the system UI face. On * Tabitha's Mac that means it has been showing San Francisco, not Inter, * since it shipped. This @font-face is what makes the stated choice true. */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ----------------------------------------------------------------------- Brand palette. Byte-identical to the Chofski design system. ----------------------------------------------------------------------- */ --offwhite: #f7f4f0; --putty: #d9cfc3; --charcoal: #3c3c3b; --ink: #212823; --sage: #a3b9a3; --darksage: #5a7060; --ochre: #d9822b; --teal: #355c6b; --error: #b8533a; --line: #e6e0d8; --white: #fffdfb; /* ----------------------------------------------------------------------- Teal ramp, promoted from the demo. The brand has one teal; a UI needs a scale for hierarchy, hover states and quiet grounds. ----------------------------------------------------------------------- */ --deep-teal: #2a4a57; --mid-teal: #5a8a9a; --light-teal: #a3c4cf; --teal-mist: #dfe9ed; /* Ochre companions. --ochre-soft is the demo's; --ochre-fill-hover is new * and is explained in the contrast section below. */ --ochre-soft: #e6a063; --ochre-fill-hover: #cf7a25; /* Success. The demo darkened 6a8a6a to 4a8a6a, taking it from 3.85:1 to * 4.09:1 on off-white. Kept, because the brand has no success colour at * all and sage cannot be one: sage is structural, not semantic. Note the * ramp still sits under 4.5, so it is a FILL and a border colour, not a * text colour. Use --status-* below when the meaning must be read. */ --success: #4a8a6a; /* ----------------------------------------------------------------------- Functional status ramp, promoted from the demo, deliberately NOT brand colours. Sage and ochre cannot carry "critical" without either lying about severity or burning the action accent on a passive signal. ----------------------------------------------------------------------- */ --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; /* Chart neutrals and categorical series, promoted from the demo. Nothing * charts yet; they are here so the first chart does not invent a palette. */ --chart-muted: #898781; --chart-grid: #e1e0d9; --chart-baseline: #c3c2b7; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; --series-other: #9aa0a6; /* ----------------------------------------------------------------------- Shape, depth and motion. From the demo, which is the design target. ----------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(33, 40, 35, .04); --shadow-sm: 0 2px 8px rgba(33, 40, 35, .06); --shadow-md: 0 8px 24px rgba(33, 40, 35, .08); --shadow-lg: 0 24px 60px rgba(33, 40, 35, .12); --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; /* ----------------------------------------------------------------------- CONTRAST-SAFE PAIRS. These are not preferences. Each one replaces a value that was measured and failed WCAG AA (4.5:1 for normal text), and each ratio below was computed against the real composited background. 1. Text on the ochre action fill. white on #d9822b = 2.88 fails badly. This is what the demo does, on every screen it has. charcoal on #d9822b = 3.77 fails. This is what the app did. ink on #d9822b = 5.16 PASSES, and costs nothing: ink is already a brand colour. The hover state then needs care in the opposite direction from the usual instinct. Darkening a light fill REDUCES its contrast with dark text, and the old hover #c46f20 drops ink to 4.05, so fixing the label would have quietly broken the hover. #cf7a25 is the darkest hover that still reads as a change and keeps ink at 4.64. ----------------------------------------------------------------------- */ --fill-action: var(--ochre); --fill-action-hover: var(--ochre-fill-hover); --on-fill-action: var(--ink); /* 2. Chip text, measured on the chip's OWN tint over the page, which is a * darker ground than the page and is where the earlier reading went * wrong. Three of the four coloured chips were failing, not one: * sage #5a7060 on its tint = 4.08 -> #536758 = 4.64 * ochre #a3661c on its tint = 3.70 -> #8e5918 = 4.61 * red #b8533a on its tint = 3.74 -> #a14933 = 4.61 * teal #355c6b on its tint = 5.40 already passed, left alone * Each shift is small enough that the chip still reads as its own * colour, which matters: these chips carry rate-card lifecycle state, * and interface principle 2 asks that state be legible at a glance. */ --chip-sage-text: #536758; --chip-teal-text: var(--teal); --chip-ochre-text: #8e5918; --chip-red-text: #a14933; }