/* ════════════════════════════════════════════════════════════════════════════ CCWP DESIGN TOKENS — the single source of truth (SPEC §3.2). Consumed by EVERYTHING: public site, elections subdomain, plats, jobs, Document Center, and the admin SPA. This file is the ONLY place a raw color value may appear — site.css, admin.css and every block renderer use var() exclusively (guarded by tools/contrast-check.mjs). Contrast annotations: every text/background pairing used by the system is annotated with its WCAG 2.1 contrast ratio. AA requires ≥ 4.5:1 for normal text, ≥ 3:1 for large text (≥ 24px / 19px bold) and UI components. BREAKPOINTS (SPEC §3.2 — exactly four; no other widths anywhere): @custom-media --bp-sm (min-width: 480px); ≥ 480px — large phones @custom-media --bp-md (min-width: 768px); ≥ 768px — tablets @custom-media --bp-lg (min-width: 1024px); ≥ 1024px — desktop / full nav @custom-media --bp-xl (min-width: 1280px); ≥ 1280px — wide desktop (@custom-media is not yet native — the values above are documentation; media queries in site.css hard-code exactly these four widths and no others.) ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Brand palette (from the live site, WCAG-tuned variants kept) ────── */ /* THE BRAND FAMILY IS DEEP EMERALD (2026-09-02). The --cc-navy* NAMES are kept and now mean a ROLE, not a hue — see "WHY THESE VALUES" below the admin-inline sentinel for the reasoning and the arithmetic. */ --cc-navy: #134030; /* primary emerald — on white 11.6:1 (AA/AAA ✓) */ --cc-navy-dark: #092a1d; /* deep emerald — on white 15.4:1 (AAA ✓) */ --cc-navy-mid: #0c5b41; /* link/nav emerald— on white 8.1:1 (AAA ✓) */ --cc-navy-light: #d1fae5; /* tint fill — brand text on it 10.3:1 ✓ */ --cc-navy-xlight: #ecfdf5; /* section tint — body text on it 14.6:1 ✓ */ --cc-gold: #c8951a; /* brand gold — NON-TEXT accents only on white (2.7:1); as text ONLY on navy-dark 5.7:1 ✓ */ --cc-gold-text: #7a5c00; /* gold for text on white/tints — 6.3:1 (AA ✓) */ --cc-gold-bright: #e8a820; /* gold for text/UI on navy surfaces: on navy-dark 7.3:1 ✓ · on navy 5.6:1 ✓ on navy-mid 4.0:1 (large text/UI only ✓) */ --cc-gold-light: #f5e6c4; /* pale gold — text on navy-dark 12.4:1 ✓, on navy 9.4:1 ✓; as a fill, pair with --cc-text (13.1:1 ✓) or --cc-gold-text 5.06:1 */ --cc-red: #b91c1c; /* alerts ONLY — on white 6.5:1 (AA ✓); white text on red fill 6.5:1 ✓ */ --cc-red-dark: #7f1d1d; /* urgent-alert fill — white on it 10.4:1 ✓ */ --cc-red-light: #fef2f2; /* alert tint — --cc-red text on it 6.0:1 ✓ */ --cc-green: #166534; /* success — on white 7.4:1 (AA ✓) */ --cc-green-light: #f0fdf4; /* success tint — green text on it 6.9:1 ✓ */ /* ── 2. Grays (cool, navy-cast) ─────────────────────────────────────────── */ --cc-white: #ffffff; --cc-gray-50: #f7f9fb; /* card/section wash — body text on it 14.4:1 ✓ */ --cc-gray-100: #f0f2f5; /* legacy band gray — body text on it 13.6:1 ✓ */ --cc-gray-200: #e2e6ec; /* hairlines on white 1.3:1 (decorative) */ --cc-gray-300: #d0d6de; /* card borders (decorative, 1.5:1) */ --cc-gray-400: #9aa5b1; /* disabled/ghost UI on white 2.6:1 — never for meaningful text */ --cc-gray-500: #6b7684; /* icons/borders-with-meaning on white 4.6:1 ✓ */ --cc-gray-600: #505a68; /* muted text on white 7.0:1 (AA ✓) */ --cc-gray-700: #3a4350; /* strong muted on white 10.0:1 ✓ */ --cc-gray-900: #1e2530; /* body text on white 15.4:1 (AAA ✓) */ /* ── 3. Semantic aliases (what components actually reference) ───────────── */ --color-text: var(--cc-gray-900); /* on --color-surface 15.4:1 ✓ */ --color-text-muted: var(--cc-gray-600); /* on --color-surface 7.0:1 ✓ */ --color-text-invert: var(--cc-white); /* on navy 11.6:1 / navy-dark 15.4:1 / navy-mid 8.1:1 ✓ */ --color-link: var(--cc-navy-mid); /* on white 8.1:1 ✓ */ --cc-link-hover: var(--cc-navy); /* on white 11.6:1 ✓ */ --color-link-hover: var(--cc-link-hover); --color-link-invert: var(--cc-gold-bright); /* links on navy surfaces */ --color-surface: var(--cc-white); --color-surface-tint: var(--cc-gray-50); --color-surface-brand: var(--cc-navy-light); --color-surface-dark: var(--cc-navy-dark); /* .band-navy moments */ --color-border: var(--cc-gray-300); --color-border-strong: var(--cc-gray-500); --color-heading: var(--cc-navy); /* on white 11.6:1 ✓ */ --color-accent: var(--cc-gold); /* non-text accents */ --color-danger: var(--cc-red); --color-success: var(--cc-green); /* Alert severity styles (SPEC §4 alerts — locked here so severity contrast is enforced by construction; each = fill / text / icon-accent): info: navy-light fill, navy text 10.1:1 ✓ warning: gold-light fill, --cc-text text 13.1:1 ✓ (gold-text 5.3:1) urgent: red fill, white text 6.5:1 ✓ success: green-light fill, green text 6.9:1 ✓ closure: navy-dark fill, white text 15.4:1 ✓ (gold-bright 7.3:1) */ --alert-info-bg: var(--cc-navy-light); --alert-info-fg: var(--cc-navy); --alert-warning-bg: var(--cc-gold-light); --alert-warning-fg: var(--cc-gray-900); --alert-warning-accent: var(--cc-gold-text); --alert-urgent-bg: var(--cc-red); --alert-urgent-fg: var(--cc-white); --alert-success-bg: var(--cc-green-light); --alert-success-fg: var(--cc-green); --alert-closure-bg: var(--cc-navy-dark); --alert-closure-fg: var(--cc-white); --alert-closure-accent: var(--cc-gold-bright); /* ── 4. Alpha / overlay tokens (so no raw rgba leaks into site.css) ─────── */ --scrim-navy: rgba(9, 42, 29, 0.82); /* photo overlays — white text over courthouse ≥ 12:1 ✓ */ --scrim-navy-soft: rgba(9, 42, 29, 0.55); --scrim-navy-grad: linear-gradient(180deg, rgba(9,42,29,.68) 0%, rgba(9,42,29,.86) 100%); --scrim-hero-grad: linear-gradient(115deg, rgba(9,42,29,.92) 0%, rgba(19,64,48,.78) 55%, rgba(12,91,65,.55) 100%); --white-alpha-10: rgba(255, 255, 255, 0.10); --white-alpha-18: rgba(255, 255, 255, 0.18); --white-alpha-35: rgba(255, 255, 255, 0.35); --white-alpha-70: rgba(255, 255, 255, 0.70); --navy-alpha-08: rgba(19, 64, 48, 0.08); --navy-alpha-15: rgba(19, 64, 48, 0.15); --gold-alpha-25: rgba(200, 149, 26, 0.25); --shadow-color: rgba(9, 42, 29, 0.10); --shadow-color-deep: rgba(9, 42, 29, 0.20); /* Header/footer gradients (brand moments) */ --grad-header: linear-gradient(135deg, #092a1d 0%, #014d36 100%); --grad-footer: linear-gradient(180deg, #012415 0%, #092a1d 100%); --grad-navy-btn: linear-gradient(180deg, #0c5b41 0%, #134030 100%); --grad-gold-btn: linear-gradient(180deg, #e8a820 0%, #c8951a 100%); /* gold button carries NAVY-DARK text: on gold-bright 5.4:1 ✓, gold 4.7:1 ✓ */ /* ── 5. Typography ──────────────────────────────────────────────────────── */ --font-ui: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif; --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid modular scale (ratio 1.125 at the small end, stretching for display). Body/UI text NEVER goes below 1rem (SPEC §3.2). */ --fs-meta: 0.9375rem; /* 15px — uppercase kickers, badges, fine meta ONLY */ --fs-0: 1rem; /* 16px — body floor */ --fs-1: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* lede/body-lg */ --fs-2: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem); /* h4 / big UI */ --fs-3: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem); /* h3 */ --fs-4: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); /* h2 / section title */ --fs-5: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); /* page-banner h1 */ --fs-6: clamp(2.375rem, 1.9rem + 2.6vw, 3.5rem); /* homepage hero h1 */ --lh-body: 1.65; --lh-tight: 1.25; --lh-display: 1.12; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Inter — stat numbers, chips */ --fw-black: 900; /* Merriweather display only */ /* ── 6. Spacing scale (4px base) ────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 7rem; /* 112px */ --section-pad: clamp(var(--space-8), 6vw, var(--space-12)); /* ── 7. Layout ──────────────────────────────────────────────────────────── */ --max-width: 1280px; --content-width: 60rem; /* comfortable prose measure inside blocks */ --container-pad: clamp(1rem, 4vw, 1.5rem); /* ── 8. Radius (one system: 8px — SPEC §3.2) ────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-full: 999px; /* ── 9. Shadow ramp (exactly four steps) ────────────────────────────────── */ --shadow-1: 0 1px 4px var(--shadow-color); --shadow-2: 0 3px 10px var(--shadow-color); --shadow-3: 0 6px 24px var(--shadow-color-deep); --shadow-4: 0 12px 40px var(--shadow-color-deep); /* ── 10. Focus ring (never removed; :focus-visible styled) ──────────────── */ --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--cc-navy); /* on light bg */ --focus-ring-dark: 0 0 0 3px #092a1d, 0 0 0 5px var(--cc-gold-bright); /* on navy surfaces — gold-bright ring vs navy-dark 7.3:1 ✓ (≥3:1 req.) */ /* ── 11. Motion ─────────────────────────────────────────────────────────── */ --transition: 0.22s ease; --transition-slow: 0.45s ease; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ── 12. Brand imagery (single reference point for the courthouse set) ──── */ --img-courthouse: url('/assets/img/courthouse-hero.jpg'); --img-courthouse-banner: url('/assets/img/courthouse-banner.jpg'); --img-flag: url('/assets/img/texas-flag.jpg'); --img-seal: url('/assets/img/seal-gold.png'); } /* @admin-inline:stop */ /* ───────────────────────────────────────────────────────────────────────────── WHY THESE VALUES — the county brand moved from navy to deep emerald on 2026-09-02. Kept below the sentinel so the reasoning does not spend shell bytes on every admin page load; the values themselves are above it. The county brand was navy until 2026-09-02. The token NAMES are kept: they are read in 412 places across site.css, admin.css, the block renderers and the admin SPA, and "band-navy" is additionally a STORED enum value inside published page documents (blocks/callout.js), so the word cannot be retired from the data anyway. Read --cc-navy* as a ROLE — deepest / primary / lightest brand ink — not as a hue. The elections theme established exactly this convention before the county adopted it. THE HUE CHANGED AND THE LUMINANCE DID NOT. Each value below was solved to match the luminance of the navy it replaces, so every ratio this file documents is preserved to two decimal places rather than merely still passing. That matters most for --cc-gold-bright, which is --color-link-invert: gold links on the brand surface sat at 5.57:1 on navy, and the obvious off-the-shelf emerald (#064e3b) would have dropped them to 4.65:1 — legal, and visibly thin at small sizes. WHAT WAS SOLVED FOR. Each brand value was chosen to match the LUMINANCE of the navy it replaces, not merely to pass AA: role navy emerald on white deepest #102540 -> #092a1d 15.43 -> 15.44 primary #1a3a5c -> #134030 11.64 -> 11.64 lightest #24527f -> #0c5b41 8.11 -> 8.11 tint #e8f0f8 -> #d1fae5 brand on tint 10.12 -> 10.27 section #f0f5fb -> #ecfdf5 body on tint 14.06 -> 14.63 So all 59 pairings tools/contrast-check.mjs enumerates hold at the SAME ratio, and the eight involving a tint improve. Note that the checker reads only this file and its stale-literal guard skips :root, so a repoint of the county palette is not actually protected by it — the arithmetic above was done by hand and is the real guarantee. ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── EVERYTHING BELOW THIS LINE IS PUBLIC-SITE ONLY. web/admin.css inlines this file so the CMS chrome uses the county tokens, and web/build.mjs stops that inlining here (see its header). The CMS is `class="app …"` and no admin screen, including the editor canvas, ever stamps a `site-*` class — so every rule below is unreachable in the admin bundle and would be 4.4 KB of dead weight in a 220 KB shell budget. Adding the theme without this sentinel is what pushed the shell to 100.1 % of its warn line at the Phase-3.5 gate. This is a CSS comment and nothing more: browsers, the public renderer and tools/contrast-check.mjs all read the whole file, unchanged. If a future admin surface ever DOES preview a page under a `site-*` body class, delete the sentinel — the only cost is shell bytes. ───────────────────────────────────────────────────────────────────────── */ /* 13. PRINT — the dark-field elements site.css's own print rules do not name. [was MODULE T1's elections theme; the colour half of it is gone] HISTORY, because it explains the shape of what is left. T1 gave the elections subdomain a deep-emerald palette so residents could tell the two sites apart. On 2026-09-02 the county adopted that same idea as its own brand, and the county's decision was ONE brand for both sites — so the scoped colour block became a re-declaration of what :root already says and was deleted outright. Elections now inherits the emerald from :root. THE PRINT RULES SURVIVE, AND ARE NO LONGER SCOPED. site.css 34 drops the ink field on .site-header, .page-banner, .band-navy and the footer bands, and 35.5 on the style-preset tones. Neither names .hero, .data-table thead th, .alert-bar, .event-row__date or .chip — all of which paint a dark brand field and, on paper, print as a solid block with white text inside it. T1 patched that for elections only, because module ownership did not let it edit site.css. The gap was never elections-specific: the county has been printing the same solid fields all along. Dropping the `.site-elections` scope hands the county the fix rather than taking it away from elections. */ @media print { :is(.hero, .hero__scrim, .data-table thead th, .alert-bar, .event-row__date, .chip[aria-pressed="true"], .chip.is-selected, .chip[aria-current]) { background: none !important; box-shadow: none; } :is(.hero__bg, .hero__seal) { display: none !important; } :is(.hero, .hero__title, .hero__lede, .page-banner__lede, .breadcrumbs a, .site-brand__tagline, .site-footer a, .footer-col__heading, .site-footer__textmygov strong, .data-table thead th, .event-row__date, .event-row__month, .alert-bar, .alert-bar__icon, .chip) { color: CanvasText !important; } /* the header row lost its fill; it must still read as one */ .data-table thead th { border-bottom: 2px solid CanvasText; } }