/* ========================================================================== TOKENS — roadmap 9.1, 08/29/2026 (R124); 9.2 consolidation (R125) THE ONE PLACE ANY :root CUSTOM PROPERTY IS DEFINED. !! SINCE 9.2 (08/29/2026, R125) THIS IS THE ONLY :root HOME. style.css and style-v2.css define NOTHING at :root any more -- their blocks moved here verbatim, then were deduplicated to one definition per name, each keeping the value that name resolved to before the move (the LAST definition in the old load order won, so the moved style-v2 layer's values are the ones that survived -- they were already what rendered). Verified two ways: a resolver diff over all 258 names, and a 52-capture pixel diff, 0 changed. !! THE ONE RENAME: this file's original teal ramp (#2b7880 and friends, the legacy brand teal) was shadowed by style-v2's tuned teal ramp under the same --teal-* names, so nothing ever resolved to it. It is now --brand-teal-*; the --teal-* names keep the style-v2 values that actually render. Nothing referenced the old names at the time of the rename. !! WHY THIS FILE EXISTS. Measured 08/29/2026: 418 distinct colours across the two served stylesheets, 277 of them used exactly once, and 131 of them different shades of almost-white -- 781 pairs of those close enough that nobody can tell them apart. That is the clutter. It is in the NEUTRALS. !! WHAT THIS FILE IS NOT. It is NOT a palette reduction. DESIGN-NOTES rule 14 -- "section colour is functional, not decoration" -- is Scott's standing, non-negotiable rule, and two mockups were thrown out for breaking it. The roadmap's instruction to "fold the 278 single-use hexes onto the ~28-colour palette" WAS that same mistake written down: 132 of those 277 measure more than dE 12 from the palette, which means they are real, distinct, mostly FUNCTIONAL colours. So the functional colours are not merged here. They are NAMED here, which is the thing that actually makes them maintainable -- and it is what lets tests/token_integrity_test.py prove on every run that they still resolve to different colours. !! EVERY VALUE BELOW ALREADY EXISTED IN THE STYLESHEETS. No new hues were invented. The ramps were assembled from colours already in use. ========================================================================== */ :root { /* ---- Surfaces. The 131-shades-of-white problem collapses to four. ------ !! MEASURED: #fbfdfc (21 uses), #f7fbfa (9), #f2f5f4, #ffffff (65) were already carrying almost all of the real work. The rest were rounding errors written by different rounds. */ --surface-0: #ffffff; /* cards, panels, table rows */ --surface-1: #fbfdfc; /* the page under a panel */ --surface-2: #f7fbfa; /* a panel resting on the page; zebra rows */ --surface-3: #f2f5f4; /* the app background */ /* ---- Borders. Two weights, not thirty-one. --------------------------- */ --border-1: #e3eae7; /* the hairline. Default for everything. */ --border-2: #dbe5e1; /* heavier: a divider that must be seen */ /* ---- The teal ramp. Audubon's brand colour, at ten lightnesses. ------- !! THESE ARE LIGHTNESS STEPS OF ONE HUE. DESIGN-NOTES rule 14 is explicit that picking one step across several DIFFERENT ramps does NOT give you distinguishable colours -- that is how the four channel colours collapsed to one shade in greyscale. Use this ramp for surface and structure. For colour that carries MEANING, use the functional block further down. */ --brand-teal-50: #f2f8f6; --brand-teal-100: #e7f4f1; --brand-teal-200: #cbe3dd; --brand-teal-300: #7fbdc2; --brand-teal-400: #3f8f8a; --brand-teal-500: #2b7880; /* brand primary -- 30 uses, the most-used hue */ --brand-teal-600: #286e75; --brand-teal-700: #1c4f54; /* hover, emphasis, heading ink */ --brand-teal-800: #14383c; --brand-teal-900: #12292c; /* near-black teal. Body ink. */ /* ---- Brand accents and status: --mint, --gold, --ok, --warn, --danger are defined ONCE, in the re-pointing section further down (§4.3), where the style-v2 layer maps them onto its ramps -- those are the values that render. The 9.1 entries that sat here never resolved (shadowed) and were removed in the 9.2 dedupe. ---------------------------------------------- */ /* ====================================================================== FUNCTIONAL COLOUR -- DESIGN-NOTES rule 14. !! NOTHING IN THIS BLOCK MAY BE MERGED, GREYED, OR EVENED OUT. Scott, 08/06/2026: "I need there to be colour so data points stand out." The colours MAY be changed. They may NOT be made the same as each other. !! "DISTINCT" IS A MEASUREMENT, NOT AN OPINION. tests/token_integrity_test.py recomputes the pairwise difference of the band edges on every run. A comment claiming a colour set holds up is worth nothing -- one in style-v2.css was confidently wrong for an hour. ====================================================================== */ /* Profile and Move-In band edges -- .kv-tone-* in style.css */ --band-demo: #2b7880; --band-res: #8e6cc8; --band-care: #4a7fb5; --band-clinical: #c0392b; --band-pricing: #d99e14; --band-notes: #7b8a90; /* !! searched, not picked -- worst-case dE2000 15.8 against the other six across normal + protanopia + deuteranopia + tritanopia. It was #4a7fb5, identical to --band-care, until 08/29/2026. */ --band-actions: #3d427b; /* The three houses. ONE set, ONE place. Rule 5: never add a fourth. */ --house-1: #2b7880; /* Dreyfous, teal */ --house-2: #b9702f; /* Phosphor, gold */ --house-3: #3d78c4; /* Seminole, blue */ /* Resident status. A bubble the same colour as its neighbour is not doing its job. */ --status-moved-in: #1f8a4c; --status-pending: #f3b929; --status-moved-out: #c0392b; --status-never: #5a686e; /* Sidebar. Called out by Scott by name as things to keep. */ --side-label: #2b7880; --side-underline: rgba(88, 197, 168, 0.45); --side-tag-poa: #3b4d8f; --side-tag-evac: #1f6a86; /* The four rate chips. Already fixed once because they ran together in near-identical blue. Do not re-derive them. */ --rate-forever: #7d6112; --rate-tpaf-k: #2b6b45; --rate-tpaf: #2f4f8f; --rate-rrf: #7a3f78; /* ---- 9.2 round 2 (08/29/2026, R125): three families NAMED, not folded. -- The teal washes. Five pale teal grounds used ~45 times between them, written by different rounds. They are all within a few dE of each other and are the top fold candidates in DESIGN-SYSTEM-9.1-MEASURED -- but a fold CHANGES PIXELS, so it stays Scott's call. Named as measured. */ --wash-teal: #e2f0ee; /* the workhorse -- 14 uses, incl. the demo band wash */ --wash-teal-2: #eaf4f2; --wash-teal-3: #eef7f3; /* row hover, band fade */ --wash-teal-4: #eef3f2; --wash-teal-5: #f4faf8; /* zebra rows, profile panel ground */ /* Danger controls -- date-bad inputs, confirm-danger, icon-btn-danger. Same hue as --band-clinical / --status-moved-out ON PURPOSE (heritage); named separately because these mean "danger control", not a band. */ --danger-strong: #c0392b; --danger-deep: #8f2f24; /* gradient partner, allergy ink */ --danger-wash: #fdf1ef; /* pale ground, incl. the clinical band wash */ /* Warn / amber. The chip pair plus the pricing-band washes. */ --warn-ink: #8a6d1a; --warn-chip-bg: #f7edcf; --warn-wash: #fdf6e3; /* incl. the pricing band wash */ --warn-fade: #fdfaf2; /* Four more measured, consistent roles (all sites checked by hand). */ --ink-teal: #1d5c55; /* dark teal ink -- always a color: */ --hover-teal: #d9ece7; /* ghost/icon-button hover ground */ --chip-neutral: #eef1f0; /* the grey chip/badge ground */ --border-3: #e6edeb; /* a THIRD hairline weight -- fold candidate against --border-1, but a fold changes pixels, so it is named as measured */ } /* ========================================================================== FROM style.css -- what survived the 9.2 dedupe (08/29/2026, R125). style.css once held six :root blocks; the style-v2 re-pointing layer (further down) had already redefined nearly every name in them, so almost all of their definitions were dead on arrival. These are the ones that were NOT redefined and still resolve to style.css's own values. ========================================================================== */ :root { --yellow: #f6dd00; /* brand yellow — sparing accents only */ /* Globally a box-shadow value; inside .viz-root a COLOUR (scoped def in style.css). Deliberately never re-pointed -- see the §4.3 note below. */ --ring: 0 0 0 3px rgba(88, 197, 168, 0.28); /* Spacing — a 4px base. Every margin/padding should be one of these. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* Line heights — unitless ratios; the px pairs live in §4.4 below. */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; } /* ========================================================================== FROM style-v2.css -- the Stripe-redesign token layer, moved here whole in the 9.2 consolidation (08/29/2026, R125). It loaded LAST before the move, so where names collided these definitions were already the ones that rendered; they all survived the dedupe unchanged. ========================================================================== */ /* ========================================================================== §4.1 THE RAMPS — perceptually even, CIELAB-derived, Stripe's method. Nine hues, because colour is functional here (DESIGN-NOTES 14). Each ramp is laid out on the mean L* ladder measured off Stripe's own Sail tokens — 98, 94, 87, 80, 70, 60, 48, 38, 29, 21, 10 — with the chroma envelope scaled so the ramp passes through the real Audubon brand colour. ========================================================================== */ :root { /* NEUTRAL — teal-tinted, not pure grey. Carries the brand at low chroma. */ --slate-50:#f5f8f9; --slate-100:#e9efef; --slate-150:#d2dcdd; --slate-200:#bbcacc; --slate-300:#9cafb1; --slate-400:#7e9396; --slate-500:#607679; --slate-600:#495d5f; --slate-700:#3a4849; --slate-800:#2a3435; --slate-900:#171d1d; /* TEAL — brand primary. #286e75 sits at L*42.6, between 500 and 600. NOTE: style.css once declared --teal-600/700/800/900 itself (#2b7880 / #286e75 / #1c4f54 / #14383c) and this ramp superseded them by cascade order — see §4.3a in the spec for the 14 references it re-coloured. The 9.2 dedupe removed those dead declarations; the same four values live on as --brand-teal-500/600/700/800 near the top of this file. */ --teal-50:#f0fafb; --teal-100:#e1f0f2; --teal-150:#c1dfe2; --teal-200:#a3cfd4; --teal-300:#7cb5bb; --teal-400:#5a9aa1; --teal-500:#347c84; --teal-600:#1e6269; --teal-700:#1d4b50; --teal-800:#16373a; --teal-900:#0c1f21; /* MINT — brand accent */ --mint-50:#eafcf6; --mint-100:#d6f4ea; --mint-150:#abe5d3; --mint-200:#81d8be; --mint-300:#47bea0; --mint-400:#00a384; --mint-500:#008269; --mint-600:#006652; --mint-700:#004f3f; --mint-800:#003a2d; --mint-900:#002218; /* GOLD — brand accent, used sparingly */ --gold-50:#fff7ec; --gold-100:#ffebcf; --gold-150:#fdd392; --gold-200:#f4bf5f; --gold-300:#dca11c; --gold-400:#bb8600; --gold-500:#966a00; --gold-600:#775300; --gold-700:#5c4000; --gold-800:#442e00; --gold-900:#281a00; /* GREEN — success / active */ --green-50:#edfcf0; --green-100:#ddf3e2; --green-150:#b9e4c3; --green-200:#96d6a7; --green-300:#6bbc83; --green-400:#45a165; --green-500:#0e8345; --green-600:#006833; --green-700:#075028; --green-800:#093a1d; --green-900:#05210e; /* RED — danger / clinical */ --red-50:#fff6f4; --red-100:#ffe9e4; --red-150:#ffcec4; --red-200:#ffb5a6; --red-300:#ff8a75; --red-400:#eb6651; --red-500:#cd4031; --red-600:#a82a20; --red-700:#7f251b; --red-800:#5d1c14; --red-900:#370f04; /* COPPER — Phosphor house */ --copper-50:#fff6f1; --copper-100:#ffeadb; --copper-150:#fdd1b0; --copper-200:#f7bb8c; --copper-300:#e39c62; --copper-400:#c87f40; --copper-500:#a9601b; --copper-600:#884909; --copper-700:#68390d; --copper-800:#4c2a0a; --copper-900:#2d1700; /* BLUE — Seminole house / info / care tone */ --blue-50:#f5f8ff; --blue-100:#e7edff; --blue-150:#cad9ff; --blue-200:#aec8ff; --blue-300:#86acf0; --blue-400:#6290da; --blue-500:#3573c0; --blue-600:#195b9e; --blue-700:#1e4677; --blue-800:#183356; --blue-900:#0d1c32; /* VIOLET — waitlist / residency tone */ --violet-50:#faf6ff; --violet-100:#f3eaff; --violet-150:#e5d1ff; --violet-200:#d7bbfe; --violet-300:#bd9cef; --violet-400:#a17fd8; --violet-500:#8260be; --violet-600:#67499c; --violet-700:#4f3975; --violet-800:#3a2a55; --violet-900:#211732; /* The literal brand colours stay addressable and unchanged. */ --brand-teal:#286e75; --brand-teal-dark:#1c4f54; --brand-mint:#58c5a8; --brand-gold:#d99e14; } /* ========================================================================== §4.2 SEMANTIC LAYER — the only names components should use. Never a raw ramp step in a component rule; never a literal hex. ========================================================================== */ :root { /* surfaces */ --surface: #ffffff; --surface-hover: var(--slate-50); /* text — measured on white */ --text-muted: var(--slate-600); /* 6.97:1 AA */ --text-subtle: var(--slate-500); /* 4.81:1 AA — small caps and labels only */ --text-onbrand: #ffffff; /* lines */ --line: var(--slate-150); --line-strong: var(--slate-200); --line-subtle: var(--slate-100); /* interactive */ --brand: var(--teal-600); /* 6.98:1 on white */ --brand-hover: var(--teal-700); --brand-sunk: var(--teal-50); --link: var(--teal-600); /* status — bg / text / line triplets, copied structurally from Stripe's Connect appearance API, where every badge semantic ships those three. */ --ok-line: var(--green-150); --warn: var(--gold-700); --warn-line: var(--gold-150); --danger-line: var(--red-150); --info: var(--blue-700); --info-bg: var(--blue-50); --info-line: var(--blue-150); --neutral: var(--slate-700); --neutral-bg: var(--slate-100); --neutral-line: var(--slate-200); } /* ========================================================================== §4.3 RE-POINTING THE LEGACY VARIABLES — same names, new values. DESIGN-NOTES 11: "do not invent a second scale." So nothing is renamed. Counted uses in style.css, so the blast radius is on the record: --navy 43 · --navy-dark 48 · --border 50 · --text 29 · --accent 26 --danger 17 · --radius-sm 14 · --shadow 12 · --card 11 · --danger-bg 10 --warn-text 10 · --shadow-hover 10 · --radius 10 · --ink 9 · --bg 8 --warn-bg 8 · --gold 7 · --ok 6 · --mint 6 · --ok-bg 2 · --warn-border 2 --elev-1 2 · --elev-2 2 · --elev-3 1 ========================================================================== */ :root { /* ---- brand aliases ---- */ --navy: var(--teal-600); --navy-dark: var(--teal-700); --accent: var(--mint-400); --mint: var(--mint-400); --bg: var(--slate-50); --card: #ffffff; --border: var(--slate-150); --text: var(--slate-800); /* 12.80:1 on white, AAA */ --muted: var(--slate-600); --ink: var(--slate-800); /* --gold is DELIBERATELY --gold-300, not the spec's --gold-400. `.badge.gold` (style.css:249) is `background: var(--gold); color:#4a3300`, and the same pairing carries the Forever Pricing / status-pending bubbles at lines 282 and 1117 — a DESIGN-NOTES 14 system. --gold-400 #bb8600 under #4a3300 = 3.70:1 FAILS AA for small text --gold-300 #dca11c under #4a3300 = 5.19:1 passes AA (today's #f3b929 = 6.68:1) The spec acknowledges this breakage in §6.5 but only repairs it in Round 3. Round 1 must not ship a failing contrast for two rounds, so the ramp step that keeps the badge legible is the one used here. --gold-300 is also within 1 ΔE of --brand-gold #d99e14. */ --gold: var(--gold-300); /* ---- status families (once declared in style.css's first :root block). Re-point the WHOLE family or the warning colours end up half-old. -- */ --ok: var(--green-700); --ok-bg: var(--green-50); --danger: var(--red-700); --danger-bg: var(--red-50); --warn-text: var(--gold-700); --warn-bg: var(--gold-50); --warn-border: var(--gold-150); /* ---- legacy radius + elevation. Without this block the panels and shadows keep their old values and most of Round 1 is invisible. ---- */ --radius: var(--r-lg); /* was 14px -> 10px */ --radius-sm: var(--r-sm); /* was 10px -> 6px */ --shadow: var(--sh-2); --shadow-hover: var(--sh-3); --elev-1: var(--sh-1); --elev-2: var(--sh-2); --elev-3: var(--sh-3); /* --ring is NOT re-pointed, on purpose. Globally it is a box-shadow value (style.css:2058); inside .viz-root it is a COLOUR (style.css:3477). Touching it produces garbage on the Financials page. */ /* ---- house palette — SAME NAMES, new values (DESIGN-NOTES 5). 1 Dreyfous teal · 2 Phosphor COPPER · 3 Seminole blue. (DESIGN-NOTES 5 still says Phosphor is gold; round .22 recoloured it to copper and tests/palette_test.py's docstring records that. The note is stale, the copper is current.) The paired inline gradients in view_census_tracking are updated in the same round — change one, change the other. ---- */ --h1-bg:var(--teal-50); --h1-fg:var(--teal-700); --h1-dot:var(--teal-500); --h1-line:var(--teal-150); --h1-solid-a:var(--teal-500); --h1-solid-b:var(--teal-700); --h1-bar-a:var(--teal-300); --h2-bg:var(--copper-50); --h2-fg:var(--copper-700); --h2-dot:var(--copper-500); --h2-line:var(--copper-150);--h2-solid-a:var(--copper-400);--h2-solid-b:var(--copper-700); --h2-bar-a:var(--copper-200); --h3-bg:var(--blue-50); --h3-fg:var(--blue-700); --h3-dot:var(--blue-500); --h3-line:var(--blue-150); --h3-solid-a:var(--blue-400); --h3-solid-b:var(--blue-700); --h3-bar-a:var(--blue-200); /* ---- resident-header chips (meta-bubble variants) — NAMED 08/30/2026 (R126, §9.5 token half). One-off functional hues, DELIBERATELY not folded onto the ramps (DESIGN-NOTES 14 — these chips keep their own hues; the style-v2 badge comment says so in as many words). Each name carries the value its chip already rendered, verbatim. ---- */ --chip-room-bg:#e2f6f4; --chip-room-ink:#17635c; --chip-rate-bg:#e5f6ec; --chip-rate-ink:#1f8a4c; --chip-age-ink:#4a5a60; --chip-hospice-bg:#fbe9f0; --chip-hospice-ink:#a34367; --chip-hospice-line:#f0cbd9; --chip-forever-bg:#fbf1d6; --chip-forever-line:#ecd79a; --chip-tpafk-bg:#e8f1ea; --chip-tpafk-line:#c3ddcc; --chip-tpaf-bg:#eaeffb; --chip-tpaf-line:#ccd9f2; --chip-rrf-bg:#f6ebf6; --chip-rrf-line:#e3cbe2; /* ---- status-bubble gradients: the bright top of each gradient; the bottom is the existing --ok / --gold / --danger. never has both stops named — neither maps to an existing token. ---- */ --status-active-hi:#2aa869; --status-pending-hi:#f5c94a; --status-pending-ink:#4a3300; --status-movedout-hi:#cf5245; --status-never-hi:#9aa7ab; --status-never-lo:#63737a; /* ---- the section-legend ROTATION palette — NAMED 08/30/2026 (R126, §9.5 token half). The assessment and care-plan section headers rotate these gradient pairs by position (:nth-of-type). They are a rotation palette, NOT bands — the ratchet history's warning — so they are named as one. The same pairs live in Python (applib/section_colours.py `_SECTION_FALLBACK` and the named SECTION_COLORS entries) — change one, change the other. --rota-teal-a happens to equal --house-1; that is the palette's shared ancestry, not a semantic link. ---- */ --rota-purple-a:#8e6cc8; --rota-purple-b:#6d4fa3; --rota-blue-a:#4a7fb5; --rota-blue-b:#35618f; --rota-gold-a:#d99e14; --rota-gold-b:#b07f0a; --rota-rust-a:#c96b5d; --rota-rust-b:#a84c3f; --rota-teal-a:#2b7880; --rota-teal-b:#2a6b66; /* ---- the waitlist panel's lavender identity — NAMED 08/30/2026 (R126, §9.5 token half). The dashboard waitlist panel is deliberately its own colour so "who is waiting" reads differently from "who lives here". ⚠️ Known defect, reported not fixed: --wl-hover equals --wl-wash-hi, so the row hover paints nothing (the open-items list has carried this since R125). Fixing it is a VISIBLE change — change --wl-hover only, with Scott's eyes on it. ---- */ /* --wl-hover was #faf8fd == --wl-wash-hi, so the hover painted nothing — the defect reported since R125. Recoloured 08/30/2026 (R126, §9.6 opener, Scott approving on screenshots): one step deeper into the panel's own lavender family (the value --wl-head-bg already renders). */ --wl-wash-hi:#faf8fd; --wl-hover:#f4f0fb; --wl-ribbon-a:#9b86c9; --wl-ribbon-b:#6a52a3; --wl-ink:#4f3d75; --wl-head-bg:#f4f0fb; --wl-head-line:#ddd3ee; --wl-chip-bg:#efe9f9; --wl-frame:#cfe3ec; --wl-bluechip-bg:#e0eef5; --wl-bluechip-ink:#2a6076; /* ---- dashboard quick-action tiles — NAMED 08/30/2026 (R126, §9.5 token half round 2). The last generation in style.css wins; these carry the WINNING values. --act-teal-bg equals --chip-room-bg by value only — an action tile is not a room chip. ---- */ --act-teal-bg:#e2f6f4; --act-green-ink:#2b6b45; --act-gold-bg:#f9ece3; --act-gold-ink:#8f5228; --act-blue-bg:#e9eef7; --act-blue-ink:#2f4a6b; --act-purple-bg:#eef2f7; --act-purple-ink:#3f5666; /* ---- care-plan option + fall-risk ambers — NAMED 08/30/2026 (R126). The checked-option amber is one family across the mini sections and the fall-risk group; the fall-risk block adds its own wash, edge and title colours. ---- */ --cp-checked-bg:#fdf0d6; --cp-checked-line:#dcb86b; --cp-checked-ink:#6f4a08; --cp-title-ink:#7b9a92; --fall-wash:#fffaf0; --fall-edge:#d59a2c; --fall-title:#9a6a10; --fall-title-line:#f0e0bd; --fall-ink:#5c4410; --fall-checked-bg:#fdf2da; /* ---- section-band WASHES — NAMED 08/30/2026 (R126, token round 2). The kv-tone bands fade a tinted wash to transparent; each tone's wash + fade pair joins its --band-* edge colour above. clinical's wash is already var(--danger-wash); only its fade needed a name. ---- */ --band-res-wash:#f1eafb; --band-res-fade:#f7f2fc; --band-care-wash:#e3effa; --band-care-fade:#eef5fb; --band-clinical-fade:#fdf5f4; --band-notes-wash:#eef1f4; --band-notes-fade:#f6f8f8; --band-actions-wash:#e9e9f0; --band-actions-fade:#f4f5f8; /* ---- the rate-history panel's blue identity (same idea as --wl-*) ---- */ --rate-ribbon-a:#7fa3d0; --rate-ribbon-b:#3f6392; --rate-ink:#33507a; --rate-head-line:#d3deee; --rate-chip-bg:#e8eff9; /* ---- resident-profile header band gradient tops (--rp-band) ---- */ --rpband-active-hi:#2f7d85; --rpband-pending-hi:#b8933a; --rpband-movedout-hi:#b05248; --rpband-movedout-lo:#8f3d34; --rpband-never-hi:#7d898e; --allergy-line:#f0cfc9; /* ---- RingCentral summary cards + transcript ---- */ --rc-texts-a:#2f7d5b; --rc-texts-b:#4aa77c; --rc-calls-a:#5a4696; --rc-calls-b:#7a63bd; --rc-vm-a:#b07d16; --rc-transcript-ink:#3a4a48; /* ---- call-offs page: tiles, chart hover, frames ---- */ --co-tile-b-a:#3f9b86; --co-tile-b-b:#256f60; /* --danger-grad-lo: the low stop of the deep-danger gradient, shared by the calloffs unexcused tile and the confirm-danger button. NOT the same value as --danger-deep (#8f2f24) — folding them would change pixels; that fold is a Scott's-call candidate. */ --danger-grad-lo:#8e2a20; --co-tile-d-a:#7a5ea8; --co-tile-d-b:#4f3d75; --co-tile-ok-a:#1f8a4c; --co-tile-ok-b:#146637; --co-bar-hover:#96261a; --co-name-line:#9ec9c4; --co-stat-bad-line:#f0c5bf; --co-frame-vol:#dde5ea; --co-status-bg:#faf7f5; --co-status-line:#e8ded1; /* the parchment hairline shared by both guide boxes (.pb-guide, .co-guide) and the playbook warranty block — one visual family, one name */ --parchment-line:#e9dfce; /* ---- residents-page filter tabs (active state) + on-dark chip inks ---- */ --filter-past-a:#6d8199; --filter-past-b:#47586d; --filter-all-a:#9b86c9; --filter-all-b:#6a52a3; --chip-ok-ondark:#ffd66b; --chip-bad-ondark:#ffb3a8; /* ---- the ro_field() edit pencil — NAMED 08/30/2026 (R126). The one SURVIVOR of the icon-btn archaeology: style-v2 restyles every icon-btn but never touches .ro-pencil, so these values are what the pencil actually renders. The five dead icon-btn generations that shared these hues were deleted the same round. ---- */ --pencil-bg:#eef2f7; --pencil-line:#d3ddea; --pencil-ink:#2f4a6b; --pencil-hover-bg:#e2eaf3; /* ==== THE ONE-OFF TAIL — NAMED 08/30/2026 (R126, closing §9.5's token half). Every remaining literal outside the chart themes and the SVG attribute selector, named after its own element. Several values are shared by ANCESTRY with earlier tokens (noted inline); they keep separate names because sharing a value is not sharing a meaning. ==== */ /* shared inks and washes (each used at 2+ sites of one meaning) */ --ink-confirm:#1d7a5f; /* checklist done tick, sync-ok */ --ink-error:#b3261e; /* checklist missing tick, sync-bad */ --danger-ink-deep:#8d2020; /* remove-link hover ink, yn-row Yes ink */ --wash-mint-row:#f6faf8; /* even table rows, row-more, cens-older */ --wash-due-today:#fff8e8; --gold-ondark:#ffe9a8; /* strong figures on the dark banner/chips */ --manuscript-line:#ecdfb0; /* planned-panel + manual-badge border */ --wash-doc-blue:#eef4ff; /* AI conv summary + playbook doc chip */ --wash-gold-hi:#fbeec9; /* the warn-wash gradient's bright stop, 2 sites */ --pb-group-line:#a9cbc2; --fin-ink:#46605d; /* financials presets + tabs */ --proj-rev-line:#c6d2ee; /* one-offs, named by element */ --ink-on-gold:#4a3300; /* .badge.gold; same value as --status-pending-ink (gold ancestry) */ --hospice-mark-ink:#6d4fa3; /* same value as --rota-purple-b (ancestry) */ --banner-navy:#23445c; --readonly-bg:#f6f8f8; --checklist-wash:#fdf5f4; /* same value as --band-clinical-fade (ancestry) */ --conv-ai-edge:#4a6fb5; --conv-ai-ink:#2c3f66; --tl-dot:#b9c7c3; --tl-dot-recent:#7fb3ac; --thead-ink:#7b8a90; /* same value as --band-notes (ancestry) */ --scrollbar-hover:#a9beb8; --manual-wash-hi:#fffdf5; --manual-ink:#8a5a00; --ec-label-ink:#4a7fb5; /* same value as --rota-blue-a (ancestry) */ --bandpill-active-bg:#eafaf1; --bandpill-active-ink:#14663c; --bandpill-moved-bg:#f1f4f6; --bandpill-moved-ink:#4d5a61; --bandpill-never-bg:#f6f1f4; --bandpill-never-ink:#6b4f5d; --sidetag-poa-bg:#eef1fb; --sidetag-poa-line:#ccd6f0; --sidetag-evac-bg:#e6f2f8; --sidetag-evac-line:#c3dfeb; --remove-ink:#a83232; --remove-line:#eccccc; --remove-hover-bg:#f7dede; --remove-hover-line:#d9a9a9; --wash-danger-soft:#fdecec; --fin-foot-ink:#8a9997; --tooltip-ink:#0b0b0b; --cal-has-line:#b9d8d3; --cal-did-dot:#cfd8d6; --score-concern-bg:#fdeadf; --score-concern-ink:#a04a12; --pb-doc-ink:#2f4f8f; --pb-doc-hover-bg:#e0eaff; --pb-equip-line:#dee7ec; --pb-file-line:#b9cfca; --resfilter2-line:#cfe1e3; --resfilter2-ink:#245f66; --cens-closed-ink:#b3bfbc; --ro-empty-ink:#9aa8a5; --tier-primary-bg:#e4f0ee; --tier-backup-ink:#6b7a77; --edit-hint-ink:#55666b; --proj-rev-bg:#dde6f9; --proj-rev-ink:#24356f; --proj-rev-hover:#cfdcf5; } /* ========================================================================== §4.4 TYPE Measured live on docs.stripe.com across 9,561 elements: body 14px / 18.2px (ratio 1.30) at weight 400. Stripe's density is a LINE-HEIGHT decision, not a font-size decision — 14px at 1.30 reads denser than 13px at 1.55. The --lh-* prefix already exists in style.css (--lh-tight/snug/normal, unitless ratios). Those three are left alone; the px pairs below extend the same prefix 1:1 with --fs-*, rather than inventing a second scale. ========================================================================== */ :root { --fs-2xs: 11px; --lh-2xs: 15px; /* micro labels, th */ --fs-xs: 12px; --lh-xs: 16px; /* badges, captions, eyebrows */ --fs-sm: 13px; --lh-sm: 18px; /* dense cells, help text */ --fs-md: 14px; --lh-md: 18px; /* DEFAULT — body, inputs, buttons, td */ --fs-base:16px; --lh-base:22px; /* DO NOT LOWER — see the warning below */ --fs-lg: 16px; --lh-lg: 22px; /* h3 / panel titles */ --fs-xl: 20px; --lh-xl: 26px; /* h2 */ --fs-2xl: 24px; --lh-2xl: 30px; /* h1 */ --fs-3xl: 30px; --lh-3xl: 34px; /* stat numbers */ --fs-4xl: 38px; --lh-4xl: 42px; /* hero figures */ --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --tracking-tight:-0.011em; --tracking-caps: 0.06em; } /* ========================================================================== §4.5 SPACING AND RADII Spacing: --sp-* is a 4px ramp and is NOT changed. Moving the spacing rhythm mid-flight would move every page on every round. Radii, measured live off Stripe: small radii on controls, larger on surfaces — a 4px button inside a 10px card. Observed usage 4px x165, 8px x85, 6px x17. THIS IS THE MOST VISIBLE SINGLE CHANGE IN ROUND 1. ~107 references shift: --r-sm 8px -> 6px (30 uses, incl. every button at style.css:5143) --r-md 10px -> 8px (18 uses) --r-lg 12px -> 10px (29 uses, incl. .panel) --r-xl 16px -> 14px (6 uses) --radius 14px -> --r-lg 10px (10 uses) --radius-sm 10px -> --r-sm 6px (14 uses) --r-xs and --r-pill are unchanged. To dial it back, raise the six values here; nothing else has to move. --r-pill stays 999px rather than the spec's 999em. Both clamp to a full pill, so the two are visually identical, but 999em recomputes to 15984px and shows up as a "changed" value on all four rate chips and every status bubble — DESIGN-NOTES 14 surfaces that should read as untouched in a before/after diff. No benefit, real noise, so it keeps its current value. ========================================================================== */ :root { --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px; } /* ========================================================================== §4.6 ELEVATION AND THE KEYLINE Sampling 5,000 elements on docs.stripe.com returned 0px border-width on ~1,950 of them. Stripe draws every hairline, focus ring and elevation as a slot in ONE composite box-shadow — their tokens even name the slots (--s--top-shadow, --s--keyline-width: 1px, --s--focus-ring, --s--box-shadow). A hairline drawn this way costs zero layout, so hover states stop reflowing and focus rings compose instead of collide. Opacities here are 5-8%. style.css currently ships several at 28-35% (0 2px 8px rgba(28,79,84,.35) on the active nav item; 0 18px 50px rgba(10,30,30,.28) on the confirm box). Dropping to single digits is most of the "expensive" feel. NOTE: the components themselves are NOT restyled in Round 1 — that is Rounds 2-7. What ships here is the token set plus the re-pointed --shadow / --shadow-hover / --elev-* above, which is what carries the change onto the ~27 existing references. ========================================================================== */ :root { --sh-key: 0 0 0 1px var(--line); --sh-key-2: 0 0 0 1px var(--line-strong); --sh-0: 0 0 #0000; --sh-1: 0 1px 1px rgba(16,17,26,.06); --sh-2: 0 1px 2px rgba(16,17,26,.05), 0 3px 6px rgba(42,52,53,.05); --sh-3: 0 3px 6px rgba(16,17,26,.06), 0 7px 14px rgba(42,52,53,.06); --sh-4: 0 8px 16px rgba(16,17,26,.07), 0 18px 36px rgba(42,52,53,.08); } /* ========================================================================== §4.7 MOTION style.css has 43 transition declarations, 37 distinct, no token, with durations scattered across .08s .1s .12s .13s .14s .15s .16s .2s .35s. Round 1 declares the scale; the existing 43 survive until Round 8. Stripe published no UI durations (Villar deliberately withheld them); De Cock's public easings are decorative at ~500ms, which is far too slow for a state change. ========================================================================== */ :root { --t-fast: 90ms; /* colour, background, opacity */ --t-base: 150ms; /* shadow, transform */ --t-slow: 240ms; /* panels, drawers */ --ease: cubic-bezier(.2,.7,.3,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* ========================================================================== §4.8 FOCUS — this must be BETTER than the reference, not equal to it. style.css has eight `outline:` declarations in 5,625 lines: two are `outline: none` (481, 2182) and six are real rings (3623, 3913, 4329, 4502, 5150, 5502). Two traps, both real: 1. `:where(...):focus-visible` is 0-1-0, NOT 0-0-0 — :focus-visible is a real pseudo-class. On its own it LOSES to every incumbent below, and the result is a DOUBLE ring: the old 2px outline plus the new one. Every incumbent is therefore named verbatim. 2. A 3px ring at 18% alpha is 1.23:1 on white. WCAG 2.2 SC 1.4.11 requires 3:1 for a focus indicator. The white spacer ring below keeps the indicator legible on any background at 6.98:1. `.cens-older-check:focus-visible ~ .cens-older-label` (style.css:5502, 0-3-0) is deliberately NOT overridden: it puts the outline on a SIBLING label, and the checkbox itself is 1px/opacity:0 (5487), so the new ring lands on an invisible element and the label keeps its working outline. That rule was added after the spec was written. ========================================================================== */ :root { /* white spacer ring + brand ring: 6.98:1, legible on any background */ --sh-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal-600); }