/* Shared pgeye brand palette.
*
* Loaded by both marketing pages (via in apps/marketing/templates/
* marketing/base.html) and the SPA (via in config/templates/spa.html
* and frontend/index.html for the dev server). Both contexts then reference
* these as `var(--pg-…)`.
*
* The SPA's Sass also needs the brand color as a compile-time literal so it
* can flow into Bootstrap's `$primary`. That mirror lives in
* frontend/src/index.scss and MUST be kept in sync with the values here.
*/
:root {
/* Brand */
--pg-primary: #2563eb;
--pg-primary-dark: #1d4ed8;
--pg-accent: #7c3aed;
/* Semantic */
--pg-success: #10b981;
--pg-warning: #f59e0b;
--pg-danger: #ef4444;
--pg-info: #06b6d4;
/* Neutrals - marketing pages consume these directly; the SPA mostly
* uses Bootstrap's --bs-* equivalents but components can override. */
--pg-bg: #ffffff;
--pg-bg-alt: #f7f9fc;
--pg-text: #0f172a;
--pg-text-dim: #64748b;
--pg-border: #e2e8f0;
--pg-code-bg: #f1f5f9;
}
/* Dark mode is set two ways:
* - SPA: explicit `data-bs-theme="dark"` on (Bootstrap convention).
* - Marketing: OS preference via prefers-color-scheme.
* The explicit attribute always wins so a SPA user who's chosen light keeps
* light even on a dark-mode OS. */
[data-bs-theme="dark"] {
--pg-bg: #0b1220;
--pg-bg-alt: #111827;
--pg-text: #e6edf3;
--pg-text-dim: #94a3b8;
--pg-border: #1e293b;
--pg-code-bg: #1c2128;
--pg-primary: #4493f8;
--pg-primary-dark: #1f6feb;
}
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme="light"]) {
--pg-bg: #0b1220;
--pg-bg-alt: #111827;
--pg-text: #e6edf3;
--pg-text-dim: #94a3b8;
--pg-border: #1e293b;
--pg-code-bg: #1c2128;
--pg-primary: #4493f8;
--pg-primary-dark: #1f6feb;
}
}