/* 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-top: #0b2447; --ti-sidebar-bottom: #142a52; --ti-sidebar-text: #dbe4f3; /* Accent (default: civic blue). Overridden by [data-accent]. */ --ti-accent: #1f6feb; --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-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 . */ :root[data-accent="teal"] { --ti-accent: #0e8a8a; --ti-accent-hover: #0b7676; --ti-focus: #38c0c0; } :root[data-accent="green"] { --ti-accent: #1a7f4b; --ti-accent-hover: #166b40; --ti-focus: #3cc07f; } :root[data-accent="violet"] { --ti-accent: #6d47d9; --ti-accent-hover: #5c39ba; --ti-focus: #9d7bff; } :root[data-bs-theme="dark"][data-accent="teal"] { --ti-accent: #2dd4bf; --ti-accent-hover: #52dcca; --ti-accent-contrast: #04140f; } :root[data-bs-theme="dark"][data-accent="green"] { --ti-accent: #4ade80; --ti-accent-hover: #6ee79a; --ti-accent-contrast: #05140b; } :root[data-bs-theme="dark"][data-accent="violet"] { --ti-accent: #a78bfa; --ti-accent-hover: #bda3ff; --ti-accent-contrast: #0d0722; } /* --- 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); } /* 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-county { border: 1px solid transparent; } .ti-badge-town { background-color: #d9edf9; color: #0b3f5c; } .ti-badge-county { background-color: #fdecc8; color: #5c3d0b; } :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; } /* --- Accessibility: visible keyboard focus on everything interactive --- */ a:focus-visible, button:focus-visible, 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); }