/* ============================================================================= BOOTSTRAP 5.3 BRIDGE — Chippie roles flow INTO Bootstrap, never the reverse. ============================================================================= Maps Chippie's semantic tokens onto Bootstrap's own --bs-* custom properties so stock components (.btn-primary, links, cards, pagination, badges, dropdowns, form-control focus, ...) inherit the design language with no per-component override. SSOT: this file is the only place the GLOBAL --bs-* variables are set. Component-scoped overrides (--bs-btn-* inside a .btn-primary rule, --bs-card-* inside a .card rule) legitimately live with their component in themes/skin.css; those are per-component, not the global bridge. Flow, one direction only: palette.css -> semantic.css -> --bs-* Nothing here may read a --c-* ramp entry or write a literal. If a Bootstrap variable needs a colour with no Chippie role, add the role to semantic.css first. LOAD ORDER IS LOAD-BEARING. Bootstrap's compiled CSS declares its own --bs-* defaults on :root. These declarations have identical specificity, so the later one wins — this stylesheet MUST be linked AFTER the Bootstrap vendor stylesheet or the whole theme silently reverts to Bootstrap's palette. See templates/base.html and templates/public_base.html. var() resolves on , where [data-theme] also lives, so this single block re-themes for dark/rustic/beach/bushland too — each theme redefines only the semantic roles, never these --bs-* vars. Success/danger/warning are intentionally left to Bootstrap's defaults: those semantic colours carry meaning and should stay stable across themes. ========================================================================== */ :root { --bs-primary: var(--primary-color); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary-color); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--primary-hover); --bs-body-bg: var(--canvas); --bs-body-color: var(--text-primary); --bs-secondary-color: var(--text-muted); --bs-body-font-family: var(--font-family-base); --bs-border-color: var(--border-color); --bs-border-radius: var(--border-radius-base); --bs-border-radius-sm: var(--border-radius-sm); --bs-border-radius-lg: var(--border-radius-lg); --bs-border-radius-xl: var(--border-radius-xl); --bs-box-shadow-sm: var(--shadow-sm); --bs-box-shadow: var(--shadow-base); --bs-box-shadow-lg: var(--shadow-lg); --bs-focus-ring-color: rgba(var(--primary-rgb), 0.25); }