/* Bootstrap 5.3 → platform-token bridge (M-045a). * * We adopt prebuilt Bootstrap 5.3.3 (bootstrap.min.css, vendored from jsDelivr, never hand-edited) * for its grid, utilities and — later in this epic — a few JS components (offcanvas, M-045c). It is * layered UNDER our own vocabulary: the app's components stay `.platform-*` (buttons.css/forms.css/ * shell.css/etc.), which load AFTER Bootstrap and win every overlap by source order. This sheet does * ONE thing: re-point Bootstrap's `--bs-*` design variables at our `--platform-*` tokens so anything * Bootstrap renders (Reboot base styles, the grid, utilities, future components) inherits our teal * Flat-UI palette AND our dark mode — with no duplicated colour values (DRY, coding-standards §3). * * Why this flips with the theme for free: our `--platform-*` tokens are themed under * `:root[data-theme="dark"]` (tokens.css). Because the `--bs-*` mappings below READ those tokens via * var(), a `data-theme` flip re-resolves every mapped `--bs-*` automatically — no dark block needed * here. For the many `--bs-*` we do NOT map (component internals), Bootstrap ships its own light/dark * sets keyed off `data-bs-theme`; the theme toggle (theme_controller.js) and the pre-paint script * (shell/partials/assets.blade.php) keep `data-bs-theme` in lockstep with `data-theme`, so those flip * too. One toggle, both layers. * * Cascade contract (assets.blade.php $stylesheets): fonts, tokens, bootstrap.min, THIS, then our * component sheets. Our `:root` here must load AFTER bootstrap.min.css so it overrides Bootstrap's * default `--bs-*` (equal specificity → later source wins) — including Bootstrap's own * `[data-bs-theme="dark"]` block for the mapped variables, which is intended: mapped values always * come from our tokens. */ :root { /* Surfaces & text. Bootstrap treats --bs-body-bg as the base content surface (cards, etc. build on it); our whitest surface fills that role, with the muted/recessed greys mapped to Bootstrap's secondary/tertiary steps in the same light→dark ordering. The page's grey backdrop is painted by .platform-shell / .platform-auth, not the , so this stays true to the current look. */ --bs-body-bg: var(--platform-color-surface); --bs-body-color: var(--platform-color-text); --bs-emphasis-color: var(--platform-color-text); --bs-heading-color: var(--platform-color-text); --bs-secondary-color: var(--platform-color-text-muted); --bs-secondary-bg: var(--platform-color-surface-muted); --bs-tertiary-bg: var(--platform-color-page-bg); --bs-border-color: var(--platform-color-border); /* Brand accent (teal). Bootstrap builds translucent utilities from the RGB triple, which CSS cannot derive from a hex — so --bs-primary-rgb reads our sibling channel token (--platform-color-accent-rgb), kept in lockstep with the hex in tokens.css. */ --bs-primary: var(--platform-color-accent); --bs-primary-rgb: var(--platform-color-accent-rgb); --bs-link-color: var(--platform-color-accent); --bs-link-color-rgb: var(--platform-color-accent-rgb); --bs-link-hover-color: var(--platform-color-accent-strong); /* Shape & type — match Bootstrap's rounding and base font to ours so Reboot's body typography and any Bootstrap surface look like the rest of the app. */ --bs-border-radius: var(--platform-radius-md); --bs-border-radius-sm: var(--platform-radius-sm); --bs-border-radius-lg: var(--platform-radius-lg); --bs-body-font-family: var(--platform-font-body); --bs-body-font-size: var(--platform-font-size-md); }