/* ═══════════════════════════════════════════════════════════════ Shadow — visual tokens The recoverable inputs the app and marketing both pull from. Scope of THIS file (2026-06-29): the palette + the gradient system (dawn / day / dusk / oxblood ramps, the film-grain surface, the orb). Type scale, shape, and motion tokens land here later (see brand kit-structure target in shadow/CLAUDE.md). Promoted from the endorsed gradient study: shadow/brand/agent/visual/_archive/gradient-study/ (index.html + style.css) Rationale + evidence floors: gradient-study/style.css header and visual/direction.md §1 (dawn/dusk keystone), §4 (envelope), §11 (orb). OWNERSHIP: stops/opacities below are the study values, here so they're recoverable inputs rather than buried in a scratch file. Kristen owns the final hex/stop choices — tune these in place; everything references them. ═══════════════════════════════════════════════════════════════ */ :root{ /* ── palette · the warm ember ladder (light → deep) ───────────── */ --c-cream: #F3DED0; /* warm cream — accent: dawn-gradient top stop, cream knockout, reverse text on dark */ --c-paper: #FBF6EF; /* light-mode SURFACE — lighter, less pink than cream; cards/panels on a white page */ --c-peach: #F3AF74; --c-amber: #F8A136; --c-gold: #EAB202; --c-orange: #F06F00; --c-ember: #EC741A; --c-rust: #DB512B; --c-brick: #BD3111; --c-crimson: #C33C04; --c-red: #990011; /* deep red */ --c-maroon: #801908; --c-oxblood: #650201; /* warm near-blacks — the shadow anchors (NEVER pure #000) */ --c-warmblack:#3F1307; --c-nightred: #390901; --c-ink: #0b0604; /* page ground */ /* ── primary · the brand color (LOCKED 2026-06-30) ── Brick — the logo color + primary accent. Chosen over rust/cinnabar for gravitas, cohesion with the skin tones, and because it is already a structural stop in the Day + Dusk ramps. Rust (#DB512B) is RETIRED as primary but kept as a ramp stop (dawn/dusk). */ --c-primary: #BD3111; /* = --c-brick · logo + type on LIGHT grounds */ --c-secondary:#DB512B; /* = --c-rust · display & headlines on DARK grounds (Brick goes muddy on ink) */ /* ── type color · by ground (LOCKED 2026-06-30) ── light (cream/white): headline = Brick (--c-primary), body = warm-black, accent = Brick. dark (ink/oxblood): headline = Rust (--c-secondary), body = cream, accent = Rust. */ --type-head-light:var(--c-primary); --type-body-light:var(--c-warmblack); --type-head-dark: var(--c-secondary); --type-body-dark: var(--c-cream); /* ── carried brand palette · the WARM SPECTRUM (7) ── cream · amber · rust · brick · oxblood · warmblack · ink. Every OTHER warm stop above is RAMP-INTERNAL (gradient construction only) — not a brand token. */ /* ── the helpers · neutral/functional counterpart family (LOCKED 2026-06-30) ── NOT brand colors; they sit beside the spectrum. Green = function & data; grey = structure & text. The cool navies were cut — the blue broke the warm-anchor rule; grey is honest (faintly-warm) charcoal. */ --c-utility: #546E35; /* Moss — connected / info / data lines, and the ok-STATE via --st-ok (on-track / taken / in-range, per the 2026-07-01 severity law). Never a CELEBRATION — no streaks, no gold stars, no cheering. (Comment updated 2026-07-01; the old "never a verdict" wording predated the severity ramp.) */ --c-utility-lift: #7E9A52; /* Moss lift — Moss's DARK-ground register (text/outlines on ink: Moss itself fails there, 3.5:1 vs lift 6.4:1). NEVER on light grounds — there Moss already passes. LOCKED 2026-07-01 (grey audit). */ --c-utility-deep: #294013; /* Forest — Moss's DEEP register on LIGHT grounds (green ink, fills). NOT the dark-ground variant (1.8:1 on ink — invisible); recharted 2026-07-01, the lift owns dark. */ /* ── the grey ladder · LOCKED 2026-07-01 · settled on the grey-audit board ── (brand/agent/visual/_archive/audits/grey-audit/ — specimens, contrast math, kill list.) LIGHT ground text: warmblack body · Charcoal strong/data · Bark muted · Stone faint (Stone is LARGE-ONLY, 3.7:1 on white — nothing load-bearing lives in the caption tier). CREAM ground text: Charcoal ONLY — one text grey on cream, period. DARK ground text: cream body · Smoke muted — nothing quieter than Smoke carries text on dark. Decimal slots keep --g-1/2/3 stable. KILLED by the audit — never reintroduce: #9A8B7C #9C8D7E #6E6256 #6B5A4E #3A2A22 #A07D68 #9C7A63 #B7A394 #7C6A5D #4A6230. */ --g-1: #D9D1C7; /* Ash — light dividers / secondary surfaces */ --g-15:#C9BFB3; /* Smoke — muted text on DARK grounds (11.1:1 on ink); also the reporting gridline */ --g-2: #8B837A; /* Stone — faint / caption text on light (LARGE-ONLY) + icons */ --g-25:#6E655C; /* Bark — muted text on light (5.7:1 on white); also the axis-unit color */ --g-3: #2C2825; /* Charcoal — strong muted / data text / dark borders / ALL text on cream (the reborn slate) */ /* ── severity ramp · the ONE status-color law (LOCKED 2026-07-01) ── Clinical/data state: olive on-track/in-range · amber borderline/missed-not-critical · brick missed/out-of-range · charcoal the verdict-free metric. DATA LOCKS to these — a clinical read never register-swaps to rust on dark (register is display-type only). bars/lines = --st-*, background tints = --f-*, label text = --t-*. */ --st-ok:var(--c-utility); --st-caut:var(--c-amber); --st-crit:var(--c-brick); --st-high:var(--c-brick); --st-metric:var(--g-3); /* charcoal — the metric/vital itself; verdict-free */ --f-ok:rgba(84,110,53,.14); --f-caut:rgba(248,161,54,.18); --f-crit:rgba(189,49,17,.13); --f-high:rgba(189,49,17,.14); --t-ok:var(--st-ok); --t-caut:var(--st-caut); --t-crit:var(--st-crit); --t-high:var(--st-high); /* ── zone-band tint tier · LOCKED 2026-07-02 · settled on the band-tier board ── (brand/agent/visual/_archive/audits/band-tier/ — flat-wash vs halftone-screen board + render study.) Two tint tiers, two JOBS — this is the whole distinction: --f-* = DISCRETE-SURFACE fill. Calendar day-cells, chips, legend swatches. The tint sits alone on white and IS the signal; it reads as a filled swatch (.13–.18). --band-* = BEHIND-DATA wash. Chart zone-bands the line/points sit ON TOP of. The band only orients; the charcoal line + haloed point stay the figure. Lighter, and per-hue tuned to EQUAL VISUAL WEIGHT (not one alpha) — brick reads heavy so it gets the least, amber reads faint so it gets the most. Landing all three at one quiet weight. Why a flat wash (not a halftone screen): a Ben-Day dot screen was explored and rejected — texture reads busier than flat tint at equal ink, muddies on-band labels, and carries moiré risk on the Fire panel. Flat wash keeps the plot calm and the labels crisp. Equal weight (NOT an intensity ramp): the more-severe band is FAINTER, not louder — severity is read from position + label + the point's own halo, never from how loud the background is. That upholds the attention-not-alarm law; a "bad-red field" is exactly what this avoids. */ --band-ok:rgba(84,110,53,.10); --band-caut:rgba(248,161,54,.16); --band-crit:rgba(189,49,17,.08); --band-high:var(--band-crit); --band-ok-dark:rgba(84,110,53,.14); /* dark ground swallows low-alpha tint → in-range lifts .10→.14 (render-verified). The ONLY dark zone-band that exists so far. Dark MULTI-zone (caut/crit-dark) is deferred: it forks on the brick-vs-rust register on dark (severity law) — settle it when a dark multi-band chart first ships. */ /* ── adherence overlay · the one standing data-series color (drift-cleared 2026-07-01) ── RETIRED: the per-vital "color = metric" palette (ember BP, gold HR, orange SpO₂, charcoal weight). The line chart now sets the metric in charcoal (--st-metric, verdict-free) and hands all color to adherence, which carries the severity ramp. Only the adherence overlay keeps a standing color. */ --s-adh: var(--c-utility); /* adherence · moss #546E35 · the universal overlay */ /* ── reporting axis · the chart frame (LOCKED 2026-07-01, grey audit §3) ── One step quieter than the metric: values sit under --st-metric, units under values, grid under everything. Reporting-only — not brand greys, though two share values. */ --ax-val: #4A413A; /* axis value labels (mono) — quieter than the charcoal metric line */ --ax-unit:var(--g-25); /* axis unit labels (mmHg, bpm, %) = Bark */ --ax-grid:var(--g-15); /* gridlines = Smoke — warmer + firmer than Ash on white */ /* ── the rule · chartered design element (LOCKED 2026-07-01, chart-anatomy F/H) ── The hairline rule is the system's editorial separator — document grammar for a record-keeping product; it was already latent everywhere (h2 rules, card hairlines, table rows, the quote's left rule). ONE weight. Rules SEPARATE content bands — mastheads, table frames, calendar edges; they never carry emphasis (type/color's job) and never double up with a box around the same content. First chartered pattern: the chart masthead band (components.css .chd-band). */ --rule-c:rgba(63,19,7,.11); /* the hairline on light grounds */ --rule-c-dark:rgba(243,222,208,.13); --rule:1px solid var(--rule-c); /* ── glass overlay · signature surface treatment (LOCKED 2026-06-30) ── Data as a premium object over gradients/portraits. The focus-axis cousin of the gradient spine. A warm-CHARCOAL veil (not brown) at low opacity so the ground's hue comes through; the saturate is what keeps it from going grey/brown. MARKETING + COORDINATOR only — NEVER a full frosted field on the patient/Assistant low-vision surface (§11): there, blur may only recede what to ignore. */ --glass-fill-dark: linear-gradient(150deg, rgba(52,46,42,.28), rgba(32,27,24,.40)); /* over bright / photo grounds */ --glass-fill-light:linear-gradient(150deg, rgba(243,222,208,.20), rgba(243,222,208,.07)); /* light frost over deep grounds */ --glass-blur: blur(26px) saturate(1.28); --glass-edge: rgba(243,222,208,.15); /* hairline border; pair with inset 0 1px 0 rgba(243,222,208,.2) for the lit top edge */ --glass-lift: 0 30px 64px rgba(0,0,0,.4); --glass-radius: 17px; /* ── the DATA register of glass (LOCKED 2026-07-02, hover-highlight) ── Glass has two habitats, and elevation + rounding are GROUND/SCALE-dependent even though the surface (frost/blur/edge) is global: over hero imagery the big black lift earns its plume; over white charting the same shadow reads muddy and greys the surface (Kristen 7/2). The data register is WARM-TINTED (the rule's warm-black, never neutral black — black over cream desaturates) and tight, with a crisper corner at tooltip scale. Tooltips + any glass over white data surfaces. */ --glass-lift-data: 0 12px 32px rgba(63,19,7,.18), 0 2px 8px rgba(63,19,7,.10); --glass-radius-data: 7px; /* ── area fade · the line's shadow (LOCKED 2026-07-02, hover-highlight — settled queue #23) ── The gradient under a trend line: series color at --area-fade → transparent at the baseline. ONE value (was .22/.32/.34 drift). LAW: multi-zone charts get NO area — the zone bands own the ground (ch-c1 form); single-band and band-less trends may carry it. It is a shadow, never a data surface. Apply in SVG as style="stop-opacity:var(--area-fade)" on the top stop. */ --area-fade: .24; /* ── focus circle · aperture · signature surface (LOCKED 2026-06-30) ── The optical OPPOSITE of glass: sharpens a circle while the field recedes into blur — attention as focus (§11). The one signature surface safe on BOTH grounds, incl. the patient surface: the act-on object stays crisp, everything else recedes. Apply the veil as a masked overlay; ring at the edge. */ --aperture-veil:blur(13px) brightness(.5) saturate(.92); /* the receding field outside the circle */ --aperture-ring:rgba(243,222,208,.4); /* hairline ring at the circle's edge */ /* ── film grain · luminance-only surface (shared with photography) ── Apply as an ::after overlay over any gradient surface. Ship opacity ~.12–.18 over soft-light; the study cranks it to ~.30 overlay only so it survives screenshot compression. */ --grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-opacity:0.15; --grain-blend:soft-light; /* ── the clock · dawn → day → dusk ramps ────────────────────────── ALWAYS interpolate `in oklch` through real palette stops. Chroma falls off INTO the shadows (anchored on the warm near-blacks); never a 2-stop sRGB ramp, never a global desaturate. GLOBAL RULE (Kristen, 2026-06-30) — gradients render ONLY on large, sweeping canvases: full-bleed heroes, tall fields/panels, big cards. NEVER a wide, skinny band/strip — that reads as a cheap 2000s gradient button. Applies everywhere, the brand guides included. A short ramp is always wrong; give it room to sweep. */ --grad-dawn:linear-gradient(180deg in oklch, var(--c-cream) 0%, var(--c-peach) 30%, #FA9948 58%, var(--c-orange) 82%, var(--c-rust) 100%); --grad-day:linear-gradient(180deg in oklch, var(--c-gold) 0%, #F48A02 30%, var(--c-ember) 56%, var(--c-rust) 80%, var(--c-brick) 100%); --grad-dusk:linear-gradient(180deg in oklch, var(--c-rust) 0%, var(--c-brick) 26%, var(--c-red) 50%, var(--c-oxblood) 74%, var(--c-warmblack) 92%, var(--c-nightred) 100%); /* ── oxblood · two registers of the same dark-wine idea ─────────── deep = the original; a wine that still carries warmth at top. noir = much darker + subtle; near-black, stops close in lightness (the ramp is felt, not seen). Night / Coordinator-dark. Both kept — pick by whether the surface should read as a rich dark COLOR (deep) or as near-black with a warm pulse (noir). */ --grad-oxblood:linear-gradient(180deg in oklch, #8A1E12 0%, #6B1108 26%, #4E0D06 52%, var(--c-warmblack) 76%, #260705 100%); --grad-oxblood-noir:linear-gradient(180deg in oklch, #2E0D08 0%, #220906 38%, #170504 72%, #100302 100%); /* ── the orb · v2 (evolved) ─────────────────────────────────────── Layered radials, applied ABOVE a base ramp, that make the field read as lit: tight ember core + broad soft halo + edge vignette. No white hotspot; glow sits slightly high (light from above). Use the layers before the base in a `background:` stack — see the .orb-* utilities. */ --orb-core:radial-gradient(34% 28% at 50% 40%, rgba(244,156,86,.40), transparent 72%); --orb-halo:radial-gradient(82% 68% at 50% 38%, rgba(214,104,52,.16), transparent 74%); --orb-vignette:radial-gradient(138% 102% at 50% 34%, transparent 44%, rgba(8,3,2,.66) 100%); /* ── type · LOCKED 2026-06-30 ── Display / brand serif: Source Serif 4 @ 450 — the logotype AND every headline. Replaces Charter. Chosen against the full serif field for refined-but-legible humanist letterforms, the right thick/thin (between Charter's chunk and a Didone's hairlines), and no stone-serif points. Variable opsz,wght; self-host for production. Capital "Shadow" in the wordmark; mark at .70 cap-scale. Body / UI sans: Inclusive Sans — disambiguated (tailed l, distinct I/1, 0/O) but neutral; pairs warm with the serif, reads premium in marketing. Patient surface [PROVISIONAL]: Inclusive Sans for now. A/B against Atkinson Hyperlegible Next on the Fire HD 10 read. If his eyes need more disambiguation, ONLY the patient surface falls back to Atkinson Next — the rest stays Inclusive. CLINICAL numerals (ADDED 2026-06-30): Inclusive Sans has NO tabular figures and no slashed zero (measured: font-variant-numeric:tabular-nums is a no-op on it). So every clinical/measured number — vitals, doses, times, %, counts, chart axes — is set in IBM Plex Mono for locking columns + a true slashed 0 (0 never reads as O). Apply with font-feature-settings:"zero" 1; font-variant-numeric:tabular-nums. EXCEPTION — calendar DATE numbers (day-of-month, on every view) stay in --font-display (Source Serif 4) as a display accent; only Inclusive-Sans evaluated this whole excursion (Atkinson too horsey/wide → hurt comprehension; Source Sans 3 considered, not adopted). Body / label TEXT always stays --font-ui (Inclusive). NUMBER RULE — superseded 2026-07-01 by the three-register numeral law below (type settlement). */ --font-display:'Source Serif 4',Georgia,serif; --font-ui:'Inclusive Sans',system-ui,sans-serif; --font-patient:'Inclusive Sans',system-ui,sans-serif; /* pencilled fallback: 'Atkinson Hyperlegible Next' */ --font-num:'IBM Plex Mono','Inclusive Sans',monospace; /* data-work numerals — see the numeral law below */ /* ── type scale · LOCKED 2026-07-01 · type settlement (board → _archive/audits/type-settlement/) ── Dominants won. Kristen's merges: headline + card-title are ONE step (30 — chart/table titles ride the headline size); the 21 step serves card meta AND dark widget titles; ALL axis text is 13. KILLED sizes — never reintroduce: 41.6 27(1.7rem) 26 20.8(1.3rem) 21.4 44 24.8(1.55rem) 14 14.5 14.7 15.7 12.5 13.5 11.5† 8. († survives only inside locked .chip.sm.) MARKETING decorative micro tier (Register II ONLY, Kristen 7/1: “they are nice”): 10.5 · 9.5 · 9 chartered as-is; hub UI never goes below --fs-microcap. 84/72/54/44/42 display sizes are specimen-only marketing sizes — used freely, never tokens. Guide ledes (16/17.6) stay unnamed page-chrome; --fs-lede gets defined at full-page/marketing design, where it will do real work. */ --fs-hero:40px; /* h1 · glass display numerals */ --fs-headline:30px; /* section/quote headlines AND card/chart/table titles + day headers (merged) */ --fs-meta:21px; /* card meta / secondary serif · dark widget titles (shared step) */ --fs-readout:40px; /* big mono reads. Weight may LIGHTEN as readouts grow (500 at 40) — flex chartered, tune at views */ --fs-readout-sm:32px; --fs-readout-xs:25px; /* tooltips + dense readouts — third step kept: a data product needs the flexibility */ --fs-body:15px; /* THE body, both grounds — 14 died with the dark register's private size */ --fs-control:13px; /* codifies the locked components (chip/seg/filt/tag); weight 600 flagged “possibly heavy” → queue */ --fs-caption:12px; --fs-microcap:11px; /* uppercase tracked labels — the hub floor */ --fs-ax:13px; /* reporting axis text, ALL of it (values · x-labels · units) = control size (was 14.5/14/12) */ /* ── leading law · five bins (killed 1.04–1.08, 1.12–1.15, 1.2, 1.3–1.35, 1.4–1.46, 1.55, 1.62) ── */ --lh-solid:1; /* display glyphs · micro-cap labels · mono readouts */ --lh-display:1.1; /* hero + headline */ --lh-title:1.25; /* title/meta + dense multi-line labels */ --lh-body:1.5; /* THE default — captions ride it; no private caption leading */ --lh-prose:1.6; /* long-form reading */ /* ── tracking law ── */ --ls-cap:.14em; /* standard micro-cap (killed .12/.16) */ --ls-section:.2em; /* section labels incl. h2 chrome (killed .18/.22/.26) */ --ls-kicker:.3em; /* the widest air (killed .34) */ --ls-display:-.01em; /* ALL display serif — one negative (killed -.005/-.015/-.02). The logo wordmark keeps its own locked -.005em — logo spec, not display type. */ /* mono tracks 0, always — tracked mono breaks the column lock */ /* ── weights charter · exactly what's in use, nothing speculative ── Source Serif 4: 400 · 450 (display) · 600 (+ italics) · Inclusive Sans: 400 body · 500 · 600 · 700 micro-cap/labels ONLY · IBM Plex Mono: 400 · 500 · 600. */ /* ── numerals · the three-register law (provenance rule ratified + prose clause, 2026-07-01) ── MONO (--font-num, via .num): numbers doing DATA WORK — aligned, compared, scanned. Tables, readouts, axes, log rows, timestamps in data cells. Device/log numbers are testimony. SERIF (--font-display): narrative MOMENTS — calendar dates, milestones, hero times. Calendar-borne. INCLUSIVE (--font-ui): numbers AS WORDS — numerals inside running text (“20 minutes”, a phone number in a sentence). A sentence has no columns; proportional figures read better there. Two zeros MAY sit near each other across registers — that is correct, not drift: the zero dresses for its job (cf. Moss's three registers). .num is the canonical HTML path; SVG chart text replicates its spec via style= (family + tabular + slashed zero) and is compliant when full-spec. tabular-nums on Inclusive is a NO-OP (it has no tabular figures) — never declare it. */ } /* ── utilities ──────────────────────────────────────────────────── */ /* grain surface: put .grain on any positioned gradient container */ .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background-image:var(--grain-img); opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend); } /* gradient fills */ .fill-dawn {background:var(--grad-dawn)} .fill-day {background:var(--grad-day)} .fill-dusk {background:var(--grad-dusk)} .fill-oxblood {background:var(--grad-oxblood)} .fill-oxblood-noir{background:var(--grad-oxblood-noir)} /* lit (orb) variants — orb layers stacked above the base ramp */ .fill-dusk-orb {background:var(--orb-core),var(--orb-halo),var(--orb-vignette),var(--grad-dusk)} .fill-oxblood-orb {background:var(--orb-core),var(--orb-halo),var(--orb-vignette),var(--grad-oxblood)} .fill-oxblood-noir-orb{background:var(--orb-core),var(--orb-halo),var(--orb-vignette),var(--grad-oxblood-noir)}