/* Tokens → Bootstrap. Bootstrap 5.3 reads these for every component it ships, which is why dark mode needs no per-component rules. */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--surface); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-subtle); --bs-body-font-family: var(--font-sans); --bs-body-font-size: var(--text-md); --bs-border-color: var(--border); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); /* Bootstrap's contextual palette (success/warning/danger, and primary's own -text-emphasis/-bg-subtle/-border-subtle trio) ships as its own literal hex, untouched by the --bs-primary bridge above. That's what .text-danger (every validation message on Login/Create/Edit), .badge.bg-success/.bg-danger (the Users roster's status pills) and .alert-* were quietly reading: Bootstrap's own red/green, unchanged between themes, not this file's tokens — and Bootstrap's literal dark-mode danger red measures 3.7:1 on --surface-raised, under the 4.5:1 floor --danger itself clears. Re-point the whole family the same way --bs-primary already is. */ --bs-success: var(--success); --bs-success-rgb: var(--success-rgb); --bs-success-text-emphasis: var(--success); --bs-success-bg-subtle: var(--success-subtle); --bs-success-border-subtle: var(--success); --bs-warning: var(--warning); --bs-warning-rgb: var(--warning-rgb); --bs-warning-text-emphasis: var(--warning); --bs-warning-bg-subtle: var(--warning-subtle); --bs-warning-border-subtle: var(--warning); --bs-danger: var(--danger); --bs-danger-rgb: var(--danger-rgb); --bs-danger-text-emphasis: var(--danger); --bs-danger-bg-subtle: var(--danger-subtle); --bs-danger-border-subtle: var(--danger); --bs-primary-text-emphasis: var(--accent); --bs-primary-bg-subtle: var(--accent-subtle); --bs-primary-border-subtle: var(--accent); --bs-emphasis-color: var(--text); --bs-secondary-bg: var(--surface-sunken); --bs-tertiary-bg: var(--surface-sunken); /* Bootstrap ships inline as a literal pink — #d63384 light, #e685b5 dark — outside the token system and below AA on both grounds. See the chip rule at the foot of this file. */ --bs-code-color: var(--text); } /* Elevated surfaces. Bootstrap defaults all three to --bs-body-bg, which is the tinted page ground; the panel, rail and composer are already --surface-raised and a modal, an offcanvas and a dropdown are elevated by the same logic. This also puts the buttons they contain on a background TokenContrastTests checks, rather than on whichever ground the component happened to inherit. These have to be set on the component classes, not on :root — Bootstrap declares each one inside its own component block, which beats :root however late :root appears in the cascade. */ .modal { --bs-modal-bg: var(--surface-raised); } .offcanvas { --bs-offcanvas-bg: var(--surface-raised); } .dropdown-menu { --bs-dropdown-bg: var(--surface-raised); } /* ── Bootstrap components the token bridge cannot reach ────────────────────── .btn-outline-* does not read --bs-primary/--bs-secondary: Bootstrap compiles literal hex into each variant's own --bs-btn-* block, so those buttons kept Bootstrap's palette through both themes and failed AA in both — #6c757d at 4.0:1 light / 3.9:1 dark, #0d6efd at 3.7:1 light / 2.4:1 dark, #dc3545 at 4.2:1 / 4.1:1, #198754 at 4.2:1 / 4.1:1. Re-point the same variables at the tokens; the pairings below are the ones TokenContrastTests asserts. */ .btn-outline-secondary { /* Label is text (4.5:1 floor); the border is a UI boundary (3:1 floor), so it takes --text-subtle rather than repeating the label's weight. */ --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--text-subtle); --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: var(--text-muted); --bs-btn-active-color: var(--text); --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: var(--text-muted); --bs-btn-disabled-color: var(--text-subtle); --bs-btn-disabled-border-color: var(--border); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-color: var(--text-subtle); --bs-btn-disabled-border-color: var(--border); } /* Solid variants — Bootstrap compiles these from its own literal hex too (--bs-primary/--bs-danger feed nothing a .btn-primary/.btn-danger actually reads), so the brand colour never reached the "Generate" button or the Delete-user confirm without its own --bs-btn-* block, same as the outlines above. */ .btn-primary { --bs-btn-color: var(--accent-on); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-color: var(--accent-on); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-disabled-color: var(--text-subtle); --bs-btn-disabled-border-color: var(--border); } .btn-danger { --bs-btn-color: var(--accent-on); --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); --bs-btn-disabled-color: var(--accent-on); --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger); } .btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--success); --bs-btn-active-border-color: var(--success); --bs-btn-disabled-color: var(--text-subtle); --bs-btn-disabled-border-color: var(--border); } /* Checkboxes, radios and switches. Bootstrap gives .form-check-input a background of --bs-form-check-bg (which defaults to --bs-body-bg, i.e. this app's --surface) and a border of --bs-border-color (--border). On a --surface-raised panel — every form in the app is inside one — that is #f4f7fc boxed in #e6ecf5 on #ffffff: 1.15:1, so the "Admin" role box and the "Locked out" toggle on /Users/Create and /Users/Edit were invisible until they were ticked. WCAG 2.2 SC 1.4.11 wants 3:1 for the boundary of a control, so the box takes the panel's own ground and --text-subtle for its edge — the same choice, for the same reason, as .btn-outline-secondary's border above (5.16:1 light, 5.01:1 dark on --surface-raised, both already asserted by TokenContrastTests). The checked fill is Bootstrap's own literal #0d6efd — one of the last places its stock blue still reached the screen, unchanged between themes and unrelated to this app's brand. --accent is what every other filled control uses. Only the fill is re-pointed: the tick and the switch knob are white shapes baked into Bootstrap's data-URI background images, and re-declaring those here would put a literal colour outside tokens.css, which this design system does not allow. */ .form-check-input { --bs-form-check-bg: var(--surface-raised); border-color: var(--text-subtle); } .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); } /* Bootstrap's own focus pair is a literal #86b7fe border and an rgba(13,110,253,.25) glow — the same stock blue again. base.css already gives every focusable control the --accent outline; this only stops the stray blue border painting under it. */ .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } /* .badge does not read --bs-primary/--bs-success/--bs-danger at all: Bootstrap hardcodes --bs-badge-color to #fff for every variant, so the bridge above only fixed the pill's background. --accent-on is already this app's answer to "what text goes on a saturated token background" (every solid .btn-* above uses it) — white was unreadable at 2.7:1 on dark mode's --accent and 1.7:1 on its --success; --accent-on clears 6.9:1 and 10.8:1 on those same two. */ .badge.bg-primary, .badge.bg-success, .badge.bg-danger { color: var(--accent-on); } html { font-size: 16px; } body { background: var(--surface); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* One visible focus treatment everywhere, replacing Bootstrap's default glow. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px var(--accent-subtle); border-color: var(--accent); } /* The rule above never actually reached a button. Bootstrap ships `.btn:focus-visible { outline: 0 }` (and the same on .btn-close, .form-check-input, .nav-link, .page-link and .accordion-button), and a class+pseudo-class selector outranks the bare `:focus-visible` above no matter how late this file loads — so every button in the app fell back to the --accent-subtle box-shadow alone, which is a near-white halo measuring 1.05:1 on --surface-raised and 1.25:1 on --surface. WCAG 2.2 SC 1.4.11 wants 3:1 for a focus indicator. Restating the outline at the same specificity, later in the cascade, puts the ring back on all of them: --accent measures 5.64:1 on --surface-raised and 5.25:1 on --surface in light, 6.22:1 and 6.85:1 in dark. The box-shadow stays as the soft halo it was meant to be; the outline is what carries the contrast. */ .btn:focus-visible, .btn-check:focus-visible + .btn, .btn-close:focus-visible, .form-check-input:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .accordion-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; font-weight: 650; } code, pre, .font-monospace { font-family: var(--font-mono); } /* Inline code — the delimiter and width-hint examples in the composer's help text. Bootstrap's pink is replaced above; giving it the sunken chip treatment as well moves the pairing to --text on --surface-sunken, which is verified and clears AA by a wide margin in both themes rather than by a rounding error. `:not(pre) >` keeps 
 blocks (.panel-sql, the SQL inspector) untouched. */
:not(pre) > code {
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    padding: .1em .4em;
}