/** * Madison Equity Data — Design Tokens * ------------------------------------------------------------------ * Wave 1-C (PIP-79 groundwork). Evolves the medi-partner-site house * style (cream/serif/mono, see zenflow-projects/trespies-operator/ * medi-partner-site/index.html) from a private family letter into a * public civic data brand: warm paper, deep ink, ONE distinctive * accent reserved for data + action, plus a dedicated T1–T5 * provenance-tier ramp for the Equity Atlas choropleths. * * Contrast ratios below are COMPUTED (WCAG 2.1 relative-luminance * formula), not estimated — see design/DESIGN-NOTES.md "Contrast * methodology" for the script. Re-run it if any color value changes. * * No external font CDNs. All families below are system/OS stacks — * see "Typography" for the self-host plan when custom faces ship. * ------------------------------------------------------------------ */ :root { /* ========================================================== COLOR — Core surfaces Paper/ink pair inherited verbatim from the partner-site seed (--cream/--ink) because it already measures AAA; renamed to --paper/--ink here since this is now the public-facing base, not a "cream letter" motif. ========================================================== */ --paper: #faf7f2; /* primary background — warm, not stark white */ --paper-raised: #ffffff; /* cards / raised surfaces above --paper */ --parchment: #f3ede3; /* recessed panels, table stripes, code blocks */ --rule: #ddd7cc; /* borders, dividers — DECORATIVE ONLY, 1.34:1, never text */ --rule-light: #eae5db; /* faint dividers on --paper-raised */ --ink: #1c1915; /* primary text — 16.39:1 on --paper (AAA) */ --ink-mid: #3d3830; /* secondary text, captions — 10.88:1 on --paper (AAA) */ --slate: #6b6555; /* tertiary text, metadata, timestamps — 5.43:1 on --paper (AA, not AAA — use ≥14px) */ /* Inverse surfaces (dark header/footer bands, the wordmark bar) */ --ink-inverse-text: #faf7f2; /* text on --ink — 16.39:1 (AAA) */ --ink-inverse-text-2: #ffffff; /* text on --ink when max contrast needed — 17.51:1 (AAA) */ /* ========================================================== COLOR — The ONE accent (data + action) Public civic brand gets a single distinctive color, not the seed's ember/gold/green trio. This is a deepened, more "documentary/serious" version of the seed's ember (#b83d1b, 5.28:1 — AA only, unsafe for body text) darkened until it clears AAA. Use for: links, primary buttons, active nav state, the accent rule under headlines, "measured" data emphasis. Never use for large decorative fills — it is a TEXT-CAPABLE accent, spend that capability on legibility, not backgrounds. ========================================================== */ --accent: #942d10; /* 7.44:1 on --paper, 7.95:1 on --paper-raised (AAA both) */ --accent-hover: #7d2609; /* darkened hover/active state — 9.13:1 on --paper (AAA) */ --accent-tint: #fbe9e2; /* accent-on-paper background wash (callouts, active-tab fill) */ --accent-tint-2: #f5d5c8; /* stronger wash — selected states, chip backgrounds */ /* Secondary warm neutrals, carried from the seed but demoted to DECORATIVE-ONLY roles (both fail AA for text — gold: 2.59:1, see DESIGN-NOTES contrast table). Use only as thin rules, icon fills at ≥3:1 large-scale, or inside already-dark chips where the tint — not the raw hue — carries the meaning. */ --gold-decorative: #c09535; /* NOT for text. Ornament, icon accents, dividers only. */ --gold-tint: #f7edd5; /* light wash behind gold ornaments */ /* ========================================================== COLOR — T1–T5 provenance tiers (Eviction-Lab-style measured-vs-modeled flags, per research/2026-07-02_wave0- synthesis.md "Provenance UI"). Confidence tiers should read as confidence, not arbitrary hue: T1 (deepest, most legible) → T5 (palest, least legible) is the same desaturation curve used for the "uncertain" visual language, not a coincidence. T4/T5 are DELIBERATELY sub-AA for text (4.19:1 / 3.72:1) — that under-threshold read IS the "this is less certain" signal. They are legend/label colors on LARGE text only, or borders on hatched swatches — never body copy. See the hatch pattern spec below for the swatch treatment itself. ========================================================== */ --tier-1: #1f5f5b; /* T1 — directly measured (e.g. Census/ACS tract-level). 6.90:1 AA */ --tier-1-tint: #e2eeed; --tier-2: #2f6b45; /* T2 — verified administrative/derived data. 5.94:1 AA */ --tier-2-tint: #e5f0e9; --tier-3: #8a6d1f; /* T3 — modeled/calibrated estimate. 4.58:1 AA (body-safe, but only just) */ --tier-3-tint: #f3ecd9; --tier-4: #9c6b60; /* T4 — county-level fallback applied to a tract. 4.19:1 — LARGE TEXT / UI LABEL ONLY, not body */ --tier-4-tint: #f2e6e2; --tier-5: #8a7d78; /* T5 — proxy/indirect indicator only. 3.72:1 — LARGE TEXT / UI LABEL ONLY, not body */ --tier-5-tint: #ece7e4; /* Hatch pattern tokens for T4/T5 map swatches — "visually uncertain" treatment named in the brief. Consumed by the .legend-swatch--hatched utility in style-tile.html; ships as an inline SVG pattern (data-uri), never an external asset, so it survives the offline single-file Atlas export. */ --hatch-stroke: var(--ink-mid); --hatch-opacity: 0.35; /* T4: hatched, reduced opacity per methodology guardrail 2 */ --hatch-opacity-t5: 0.22; /* T5: hatched, even lower opacity — one step past T4 */ --hatch-gap-px: 6px; /* ========================================================== COLOR — Semantic (form/system states, reused as the measured/caution/danger vocabulary — deliberately mapped to the SAME hues as tier-1/tier-3/accent so "verified" and "success" share one visual language across the product) ========================================================== */ --success: var(--tier-2); /* 5.94:1 AA */ --success-tint: var(--tier-2-tint); --caution: #8a5d12; /* 5.38:1 AA — form warnings, "(en inglés)" flags */ --caution-tint: #f3ecda; --danger: var(--accent); /* 7.44:1 AAA — errors reuse the accent, not a new hue */ --danger-tint: var(--accent-tint); --info: var(--tier-1); /* 6.90:1 AA — informational banners */ --info-tint: var(--tier-1-tint); /* Focus ring — visible on both --paper and --ink surfaces */ --focus-ring: #1f5f5b; /* reuse tier-1 teal: distinct from --accent so focus never reads as "error" */ --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ========================================================== TYPOGRAPHY Serif display (documentary/civic-report register, matches the seed) + a highly-legible humanist sans for UI/data (the seed used Optima/Gill Sans for BODY PROSE in a letter; a public data product reading tract tables and legend labels needs a sans built for numerals and small sizes, so the UI/data stack below swaps in system-ui-grade humanist sans with strong tabular-figure support — still zero webfont requests). Self-host note: if/when a licensed face (e.g. Untitled Sans, Inter, or a licensed serif) is adopted, host the woff2 under /assets/fonts/ and @font-face it here with font-display: swap — do NOT add a Google Fonts/Adobe Fonts . This file must keep working with zero network requests since the Atlas ships an offline single-file export. ========================================================== */ --font-display: 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, 'Times New Roman', serif; --font-body: 'Optima', 'Candara', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Courier New', 'Lucida Console', Courier, monospace; /* Type scale — 1.25 (major third) ratio, base 16px, matches the seed's --fs-* naming exactly so components can migrate without a rename pass. --fs-hero retains the seed's clamp() fluid rule. */ --fs-xs: 0.6875rem; /* 11px — eyebrow labels, mono metadata */ --fs-sm: 0.8125rem; /* 13px — captions, table cells, secondary UI */ --fs-base: 1rem; /* 16px — body default */ --fs-md: 1.125rem; /* 18px — lede paragraphs, card titles */ --fs-lg: 1.375rem; /* 22px — section headers */ --fs-xl: 1.875rem; /* 30px — page titles */ --fs-xxl: 2.75rem; /* 44px — feature headlines */ --fs-hero: clamp(2rem, 5vw, 3.5rem); /* 32px → 56px fluid — landing hero only */ /* Data/UI numeral sizes — separate scale so tract-card figures and legend numbers can be tuned without touching prose type */ --fs-data-sm: 0.8125rem; --fs-data-md: 1rem; --fs-data-lg: 1.5rem; --fs-data-xl: 2.25rem; /* index-score entry point (NARI composite headline number) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; /* headlines */ --lh-base: 1.7; /* seed default — inherited verbatim, proven readable */ --lh-relaxed: 1.85; /* long-form prose (About, methodology pages) */ --lh-data: 1.4; /* tables, legend lists — tighter than prose, still breathable */ --ls-eyebrow: 0.12em; /* mono uppercase labels, matches seed's .wordmark tracking */ --ls-tight: -0.02em; /* large display headlines */ /* ========================================================== SPACING — 4px base unit, matches the seed's --sp-* scale and naming so partner-site components drop in unmodified. ========================================================== */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-24: 6rem; /* 96px */ /* ========================================================== RADIUS ========================================================== */ --radius-sm: 4px; /* form inputs, tags, tier chips */ --radius-md: 8px; /* cards, product cards, tract cards */ --radius-lg: 14px; /* modals, large panels */ --radius-full: 999px; /* pills — language toggle, filter chips */ /* ========================================================== SHADOW — kept minimal/warm (tinted with ink, not pure black) so raised surfaces still read as "paper on paper," not glossy SaaS chrome. Civic-warm, not corporate. ========================================================== */ --shadow-sm: 0 1px 2px rgba(28, 25, 21, 0.06), 0 1px 1px rgba(28, 25, 21, 0.04); --shadow-md: 0 2px 8px rgba(28, 25, 21, 0.08), 0 1px 3px rgba(28, 25, 21, 0.06); --shadow-lg: 0 8px 24px rgba(28, 25, 21, 0.12), 0 2px 6px rgba(28, 25, 21, 0.08); --shadow-focus: 0 0 0 var(--focus-ring-width) rgba(31, 95, 91, 0.35); /* tier-1 teal glow, pairs with --focus-ring */ /* ========================================================== LAYOUT ========================================================== */ --max-reading: 68ch; /* prose measure, from seed */ --max-layout: 1040px; /* page shell, from seed */ --max-layout-wide: 1280px; /* Atlas/map pages need more room than prose pages */ /* ========================================================== MOTION — restrained; civic-data trust reads as calm, not bouncy. RCV round-stepping and Sankey transitions (PIP-80) should use --motion-deliberate, never --motion-quick. ========================================================== */ --motion-quick: 120ms ease-out; /* hover states, toggles */ --motion-deliberate: 320ms ease-in-out; /* RCV rounds, tab transitions, map fades */ --motion-none: 0ms; /* prefers-reduced-motion target — see style-tile.html */ } /* ============================================================== prefers-color-scheme / prefers-reduced-motion hooks Dark mode is NOT in scope for Wave 1 (civic-data trust research consistently favors a single well-tuned light theme over a half-tested dark variant) — this block only disables motion, per WCAG 2.3.3, and is safe to ship now. ============================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-quick: var(--motion-none); --motion-deliberate: var(--motion-none); } }