/* TownInfo theme layer — palette tokens (light/dark), accent presets, and the accessibility baseline. Bootstrap 5.3 components follow `data-bs-theme`; our own surfaces follow the --ti-* tokens below. */ :root { /* Neutrals — light (a cool, considered grey, not pure) */ --ti-bg: #f7f9fc; --ti-surface: #ffffff; --ti-surface-2: #f1f4f9; --ti-text: #182131; --ti-muted: #5b6675; --ti-border: #e3e8f0; /* Sidebar — a constant deep navy that reads well under either theme. --ti-sidebar-topbar is the top strip: the same colour 40% black over the sidebar top used to produce, written out opaque. Spelled out per accent rather than mixed at runtime because a translucent layer over a gradient is a background no contrast checker can resolve — see NavMenu.razor.css. */ --ti-sidebar-top: #0b2447; --ti-sidebar-topbar: #07162b; --ti-sidebar-bottom: #142a52; --ti-sidebar-text: #dbe4f3; /* Accent (default: civic blue). Overridden by [data-accent]. Contrast is checked against the DARKEST surface the accent is used on, which is --ti-surface-2 (#f1f4f9), not white. The previous #1f6feb was picked against white (4.63:1, a pass by 0.13) and is 4.20:1 on surface-2 — so every link inside a .bg-light panel failed AA, which is most of the links on the site. That is how the scan found 90 failing nodes on pages nobody thought had a problem. */ --ti-accent: #1a63d8; /* 5.21 on bg · 5.50 on white · 4.99 on surface-2 */ --ti-accent-hover: #175fce; --ti-accent-contrast: #ffffff; --ti-focus: #4c9aff; --ti-radius: 0.6rem; } :root[data-bs-theme="dark"] { --ti-bg: #0e131b; --ti-surface: #171e29; --ti-surface-2: #1f2733; --ti-text: #e7ecf3; --ti-muted: #9aa6b6; --ti-border: #2a3444; --ti-sidebar-top: #0a1830; --ti-sidebar-topbar: #060e1d; --ti-sidebar-bottom: #0f2140; --ti-sidebar-text: #d3ddee; --ti-accent: #4c9aff; --ti-accent-hover: #6aabff; --ti-accent-contrast: #071018; --ti-focus: #7db4ff; } /* Accent presets — set via data-accent on . The SIDEBAR moves with the accent too. It didn't: the swatches recoloured buttons and links while the navigation stayed navy whatever you picked, so three of the four choices looked broken — you change the colour and the largest block of colour on screen ignores you. The sidebar is the accent darkened into something text sits on comfortably, not the accent itself, which at full strength is unreadable behind white nav text. */ /* Amber replaced teal. Two reasons, and the second is the one that mattered. Teal (180deg) and green (149deg) sat 31deg apart, both dark and mid-saturation, so at swatch size they read as the same colour — which is what a reader reported. Every one of the four accents was also in the cool half of the wheel, so no amount of retuning greens would have separated them; the palette needed a warm option, not a nudge. And teal failed accessibility outright: #0e8a8a is 4.18:1 on white, under the 4.5:1 WCAG AA needs for body text, and the accent is what link text is coloured with. Amber is 4.92:1. …on WHITE. That check was made against the wrong surface: #a16207 is 4.47:1 on --ti-surface-2, so amber inherited the exact fault it was brought in to fix, just on the panels instead of the page. #95590a clears every surface (5.13:1 at worst). Check new accents against surface-2, not white. */ :root[data-accent="amber"] { --ti-accent: #95590a; --ti-accent-hover: #854d0e; --ti-focus: #d99a2b; --ti-sidebar-top: #3a2606; --ti-sidebar-topbar: #231704; --ti-sidebar-bottom: #52380c; --ti-sidebar-text: #f2e6cf; } :root[data-accent="green"] { --ti-accent: #15803d; --ti-accent-hover: #126832; --ti-focus: #3cc07f; --ti-sidebar-top: #06301d; --ti-sidebar-topbar: #041d11; --ti-sidebar-bottom: #0d452b; --ti-sidebar-text: #d6eede; } :root[data-accent="violet"] { --ti-accent: #6d47d9; --ti-accent-hover: #5c39ba; --ti-focus: #9d7bff; --ti-sidebar-top: #241340; --ti-sidebar-topbar: #160b26; --ti-sidebar-bottom: #33205c; --ti-sidebar-text: #e0d7f5; } :root[data-bs-theme="dark"][data-accent="amber"] { --ti-accent: #fbbf24; --ti-accent-hover: #fcd34d; --ti-accent-contrast: #1c1201; --ti-sidebar-top: #2c1d04; --ti-sidebar-topbar: #1a1102; --ti-sidebar-bottom: #3f2a07; --ti-sidebar-text: #f5e8cf; } :root[data-bs-theme="dark"][data-accent="green"] { --ti-accent: #4ade80; --ti-accent-hover: #6ee79a; --ti-accent-contrast: #05140b; --ti-sidebar-top: #042616; --ti-sidebar-topbar: #02170d; --ti-sidebar-bottom: #093721; --ti-sidebar-text: #cfe9d9; } :root[data-bs-theme="dark"][data-accent="violet"] { --ti-accent: #a78bfa; --ti-accent-hover: #bda3ff; --ti-accent-contrast: #0d0722; --ti-sidebar-top: #1c1033; --ti-sidebar-topbar: #110a1f; --ti-sidebar-bottom: #281a49; --ti-sidebar-text: #ddd2f2; } /* --- Base surfaces --- */ body { background-color: var(--ti-bg); color: var(--ti-text); } .card, .list-group-item { background-color: var(--ti-surface); border-color: var(--ti-border); } .card.bg-light, .bg-light { background-color: var(--ti-surface-2) !important; color: var(--ti-text) !important; } .table { --bs-table-bg: transparent; --bs-table-color: var(--ti-text); --bs-table-border-color: var(--ti-border); } /* --- Accent-driven controls --- */ a, .btn-link { color: var(--ti-accent); } a:hover { color: var(--ti-accent-hover); } .btn-primary { --bs-btn-bg: var(--ti-accent); --bs-btn-border-color: var(--ti-accent); --bs-btn-hover-bg: var(--ti-accent-hover); --bs-btn-hover-border-color: var(--ti-accent-hover); --bs-btn-color: var(--ti-accent-contrast); --bs-btn-hover-color: var(--ti-accent-contrast); --bs-btn-active-bg: var(--ti-accent-hover); } .btn-outline-primary { --bs-btn-color: var(--ti-accent); --bs-btn-border-color: var(--ti-accent); --bs-btn-hover-bg: var(--ti-accent); --bs-btn-hover-border-color: var(--ti-accent); --bs-btn-hover-color: var(--ti-accent-contrast); } /* Bootstrap's own secondary grey (#6c757d) is 4.45:1 on our page background and 4.25:1 on surface-2 — under AA on both, and .btn-outline-secondary is what the Ask suggestion chips are made of. Darkened to the same grey the theme already uses for muted text, which passes everywhere (6.26:1 / 5.99:1). Bootstrap chose 6c757d against pure white; we don't have pure white. */ .btn-outline-secondary { --bs-btn-color: #565e64; --bs-btn-border-color: #8b949e; --bs-btn-hover-bg: #565e64; --bs-btn-hover-border-color: #565e64; --bs-btn-hover-color: #ffffff; } :root[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--ti-muted); --bs-btn-border-color: #4a5462; --bs-btn-hover-bg: var(--ti-muted); --bs-btn-hover-color: var(--ti-bg); } /* Bootstrap's danger red (#dc3545) is 4.29:1 on our page background and 4.11:1 on surface-2 — under AA on both. It only ever scrapes a pass on pure white, which this app doesn't use, and `text-danger` is how every destructive action and every error message on the site is coloured: "Remove", "Delete project", the validation text under a form. Same mistake and same fix as the accent and the secondary grey before it — check a colour against the DARKEST surface it lands on. #c82333 clears every surface (5.09:1 at worst) and still reads unmistakably as a warning. Found by running the accessibility checks against a signed-in page, which the CI scan does not cover: the pages that carry destructive actions are exactly the ones behind auth. */ :root { --bs-danger: #c82333; --bs-danger-rgb: 200, 35, 51; --bs-danger-text-emphasis: #8c1823; } .text-danger { color: #c82333 !important; } .btn-outline-danger { --bs-btn-color: #c82333; --bs-btn-border-color: #c82333; --bs-btn-hover-bg: #c82333; --bs-btn-hover-border-color: #c82333; --bs-btn-hover-color: #ffffff; } :root[data-bs-theme="dark"] { /* On the dark surfaces a light red is what needs contrast, not a dark one. */ --bs-danger: #ff6b7a; } :root[data-bs-theme="dark"] .text-danger { color: #ff6b7a !important; } /* Bootstrap's inline-code pink (#d63384) is 4.34:1 on our page background — under AA, and `` is how the program pages name a fill strategy or a field key to a clerk. */ code { color: #b02a5b; } :root[data-bs-theme="dark"] code { color: #ff8fb8; } /* An agent's answer, rendered as real structure (headings, lists, paragraphs) rather than one pre-wrapped paragraph — see AnswerMarkup. The spacing exists because the markup now does: without it a three-heading answer reads as a wall. */ .ti-answer > :last-child { margin-bottom: 0; } .ti-answer h3 { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 0.35rem; } .ti-answer h3:first-child { margin-top: 0; } .ti-answer h4 { font-size: 0.95rem; font-weight: 600; margin: 0.75rem 0 0.3rem; } .ti-answer ul, .ti-answer ol { padding-left: 1.35rem; } .ti-answer li { margin-bottom: 0.2rem; } .ti-answer pre { background: var(--ti-surface-2); border-radius: 0.4rem; padding: 0.6rem 0.8rem; overflow-x: auto; } .ti-answer code { font-size: 0.9em; } /* Accent-fill surfaces (chat bubble, primary badges) follow the chosen accent + theme. */ .bg-primary { background-color: var(--ti-accent) !important; color: var(--ti-accent-contrast) !important; } /* Jurisdiction badges — themed so Town/County stay legible on either ground. */ .ti-badge-town, .ti-badge-state, .ti-badge-county { border: 1px solid transparent; } .ti-badge-town { background-color: #d9edf9; color: #0b3f5c; } .ti-badge-county { background-color: #fdecc8; color: #5c3d0b; } /* State law. Deliberately unlike the town and county badges: a resident needs to see at a glance that this is Maryland requiring something, not their council deciding it. */ .ti-badge-state { background-color: #e6e0f8; color: #33246b; } :root[data-bs-theme="dark"] .ti-badge-town { background-color: #12374d; color: #b9e2f7; border-color: #1d5876; } :root[data-bs-theme="dark"] .ti-badge-county { background-color: #4a3611; color: #f8dfa4; border-color: #6d4f17; } :root[data-bs-theme="dark"] .ti-badge-state { background-color: #2d2450; color: #d9d0f7; border-color: #453a75; } /* --- Accessibility: visible keyboard focus on everything interactive --- */ a:focus-visible, button:focus-visible, /* A PLACEHOLDER MUST NOT READ AS A VALUE. Nothing styled ::placeholder, so it inherited a colour close enough to real text that on the dark theme "Main Street 2026" in an empty Name box looked like a form that had filled itself in — reported from the first real session, on the programme workspace form. It was never one form's problem: every input in the app was doing it. --ti-muted is already the token for "present but secondary", and it carries a deliberate contrast against the surface; the extra transparency separates a hint from muted CONTENT (a timestamp, a byline) without dropping it out of sight. */ ::placeholder { color: var(--ti-muted); opacity: 0.75; } input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .form-control:focus, .form-select:focus, [tabindex]:focus-visible { outline: 3px solid var(--ti-focus); outline-offset: 2px; box-shadow: none; } /* Skip-to-content link — visible only when focused. */ .skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 2000; background: var(--ti-accent); color: var(--ti-accent-contrast); padding: 0.5rem 0.9rem; border-radius: 0 0 var(--ti-radius) var(--ti-radius); transition: top 0.15s ease; } .skip-link:focus { top: 0; color: var(--ti-accent-contrast); } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Theme switcher --- */ .theme-switch { display: inline-flex; align-items: center; gap: 0.5rem; } .theme-switch .seg { display: inline-flex; border: 1px solid var(--ti-border); border-radius: 999px; overflow: hidden; background: var(--ti-surface); } .theme-switch .seg button { border: 0; background: transparent; color: var(--ti-muted); padding: 0.2rem 0.6rem; font-size: 0.85rem; cursor: pointer; line-height: 1.4; } .theme-switch .seg button[aria-pressed="true"] { background: var(--ti-accent); color: var(--ti-accent-contrast); } .theme-switch .swatches { display: inline-flex; gap: 0.3rem; } .theme-switch .swatch { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .theme-switch .swatch[aria-pressed="true"] { border-color: var(--ti-text); } /* A document's readable text (DocumentRead). Set for reading rather than for scanning a list: a measure that doesn't force the eye across the full window, and space between paragraphs that were, in the original, separated by a page's layout. */ .ti-document { max-width: 42rem; line-height: 1.65; } .ti-document p { margin-bottom: 0.9rem; } .ti-document h2 { margin: 1.8rem 0 0.6rem; } .ti-document h2:first-child { margin-top: 0; } /* An enumerated line from the original, kept as its own paragraph rather than forced into a