/* Anatomy IT design tokens Source: Anatomy IT Brand Guidelines (Aug 2026 pages; values verified against brand_colors / fonts pages verbatim). Pending full brand book: - canonical navy (#012169 printed vs #041A6F in deck theme/icon SVGs) - Sky Blue vs Light Blue swatch fills looked swapped vs printed codes; codes below follow the PRINTED name→code pairing. */ :root { /* Primary */ --color-navy: #012169; /* Dark Blue — Pantone 280 C */ --color-purple: #8c6fca; /* Purple — Pantone 2665 U */ --color-sky: #5bc2e7; /* Sky Blue — Pantone 2985 C */ --color-blue: #5c88da; /* Light Blue — Pantone 2718 C */ --color-text: #434343; /* Black (text) */ --color-grey-light: #f1f3fd; /* Light Grey */ --color-white: #ffffff; /* not a brand swatch: page ground, ink on brand fills */ /* Secondary / accents */ --color-teal: #40c1bb; /* Teal — Pantone 325 U */ --color-yellow: #f6d57a; /* Yellow — Pantone P 7-6 C */ --color-yellow-light: #f9f6e5;/* Light Yellow — Pantone P 1-9 U */ /* Auxiliary greys (infrequent, mostly text/UI) */ --color-grey-90: #909090; --color-grey-c8: #c8c8c8; --color-grey-e8: #e8e8e8; --color-grey-blue: #e8ebf3; /* Semantic aliases — pages use THESE, so a brand-book revision is cheap */ --bg: var(--color-white); --bg-alt: var(--color-grey-light); --bg-dark: var(--color-navy); --ink: var(--color-text); --ink-heading: var(--color-navy); --ink-on-dark: var(--color-white); --accent: var(--color-purple); --accent-2: var(--color-teal); --link: var(--color-blue); /* Elevation, scrim and decorative fills. Each one restates a brand colour at low alpha: 1 33 105 is --color-navy, 92 136 218 --color-blue, 64 193 187 --color-teal, so a palette revision has to reach these lines too. Named for the surfaces they sit on. */ --shadow-card: 0 8px 24px rgba(1, 33, 105, 0.08); --shadow-card-subtle: 0 8px 24px rgba(1, 33, 105, 0.06); /* FAQ items, step tiles, cards on a tinted section */ --shadow-elevated: 0 12px 32px rgba(1, 33, 105, 0.12); /* nav dropdown, video embed */ --shadow-nav-menu: 0 16px 32px rgba(1, 33, 105, 0.12); /* mobile nav panel: same colour, dropped further */ /* Decorative hexes behind the home hero and the page hero. The teal fill differs by 0.02 in alpha between the two heroes; both are kept, so each hero renders as authored. */ --hex-fill-blue: rgba(92, 136, 218, 0.25); --hex-fill-teal-hero: rgba(64, 193, 187, 0.22); --hex-fill-teal-pagehero: rgba(64, 193, 187, 0.2); /* Services punch list (16.09). The dot field of the (A) page hero and the soft wash behind the Advantage cards restate brand colours at low alpha: 91 194 231 is --color-sky, 140 111 202 --color-purple, 92 136 218 --color-blue, so a palette revision has to reach these lines too. */ --dot-hero: rgba(91, 194, 231, 0.85); --dot-hero-soft: rgba(91, 194, 231, 0.5); --wash-purple-soft: rgba(140, 111, 202, 0.3); --wash-blue-soft: rgba(92, 136, 218, 0.3); /* Solutions punch list (17.09). The (B) page hero lays white copy over a photograph; the scrim restates --color-navy (1 33 105) at two alphas, heavy behind the copy and lighter over the rest of the frame, so the 17px lede and the 13px breadcrumb keep their contrast whichever picture is used. */ --scrim-pagehero-photo: rgba(1, 33, 105, 0.88); --scrim-pagehero-photo-far: rgba(1, 33, 105, 0.6); /* Home top block (17.09, re-graded 20.09). No longer navy and no longer a gradient: a flat neutral darkening of the photograph, so nothing tints the frame. Both names are kept because the narrow layout sets the scrim from -photo alone; -far now holds the same value, and the two move together. Measured on the frame in place: white copy against the brightest pixel under it is 4.84:1, over the 4.5:1 floor at this type size. Lighter than this and the lede drops under it; darker and the picture stops reading. */ --scrim-hero-photo: rgba(38, 38, 38, 0.65); --scrim-hero-photo-far: rgba(38, 38, 38, 0.65); /* Readiness status scale — NOT part of the brand palette. Used by the sample report's score dial, verdict pill and category chart on /solutions/healthit-framework/, and by form field-error text/borders (-critical-ink only). Reinstated 2026-09-18: a real sample PDF (Surgical Center of Evergreen, Sept 2026 — a fictional demo org, not a real client) confirms the HEALTHIT 360 Scorecard does compute this score; a false start earlier that day had these values removed on the mistaken assumption it didn't. The four scale fills and the two soft tints are sampled from that PDF's scoring bar, verdict pill and chart track; -critical-ink is ours, a darkened red so the verdict text meets WCAG AA on the soft tint (the source PDF puts it below the threshold). */ --status-critical: #e04848; /* source scoring bar, 0-40% */ --status-moderate: #e0a000; /* source scoring bar, 41-60% */ --status-strong: #60b048; /* source scoring bar, 61-85% */ --status-excellent: #289840; /* source scoring bar, 86-100% */ --status-critical-soft: #fce9e9; /* source chart track behind a red bar */ --status-moderate-soft: #fbf2dd; /* source "Moderate Improvements Needed" pill */ --status-critical-ink: #a32222; /* build team — see above */ /* Client Support punch list (18.09). The two Client Billing cards on the live page are a photograph under a white wash inside a hairline frame. Both values are read out of the live stylesheet itself (anatomyit.com/wp-content/uploads/bb-plugin/cache/6647-layout.css, nodes 679y0z8iobrs and r5xoq06fcke3), not sampled off a screenshot: the wash is plain white at 0.72 and #d1d1d1 is not one of the brand greys, so neither restates a palette colour and a brand-book revision leaves them alone. */ --wash-card-photo: rgba(255, 255, 255, 0.72); --border-card-photo: #d1d1d1; /* Careers punch list (20.09). The recruitment-scam dialog dims the page behind it. The value restates --color-navy (1 33 105) at the same alpha the page heroes use at the far end of their scrim, so a palette revision has to reach this line too. */ --scrim-modal: rgba(1, 33, 105, 0.6); /* Type */ --font-sans: "Montserrat", Arial, sans-serif; }