/* =========================== Site overrides on top of Bootstrap 5.3 =========================== */ /* --------------------------------------------------------------------------- Design tokens & theming --------------------------------------------------------------------------- Two layers: 1. Semantic tokens (--color-*) — what each color is used FOR. These are the only values that change between themes; everything in the stylesheet should consume these instead of hardcoded literals. 2. Brand aliases (--helea-*) — kept for backward compatibility with the existing stylesheet. They map onto the semantic tokens so older rules still react to theme changes for free. Theme switching: - Default :root values define the DARK theme (current production look). - [data-theme="light"] on overrides them for the LIGHT theme. - When the user has not made an explicit choice (data-theme="auto"), prefers-color-scheme: light drives the same overrides via a media query. --------------------------------------------------------------------------- */ :root { /* Brand */ --color-accent: #e63946; --color-accent-hover: #c92c39; /* Surfaces & text — DARK theme (default) */ --color-surface: #06334a; --color-surface-elevated: rgba(255, 255, 255, 0.04); --color-surface-elevated-strong: rgba(255, 255, 255, 0.08); --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.7); --color-text-faint: rgba(255, 255, 255, 0.5); --color-border: rgba(255, 255, 255, 0.18); --color-border-soft: rgba(255, 255, 255, 0.1); --color-shadow: rgba(0, 0, 0, 0.25); --color-grid-line: rgba(255, 255, 255, 0.04); /* Backward-compat aliases — DO NOT add new usages. */ --helea-bg: var(--color-surface); --helea-accent: var(--color-accent); --helea-accent-hover: var(--color-accent-hover); --helea-text: var(--color-text); --helea-muted: var(--color-text-muted); --helea-faint: var(--color-text-faint); --helea-border: var(--color-border); } /* LIGHT theme — explicit user choice. */ [data-theme="light"] { --color-surface: #f6f8fa; --color-surface-elevated: rgba(6, 51, 74, 0.04); --color-surface-elevated-strong: rgba(6, 51, 74, 0.08); --color-text: #06334a; --color-text-muted: rgba(6, 51, 74, 0.7); --color-text-faint: rgba(6, 51, 74, 0.5); --color-border: rgba(6, 51, 74, 0.18); --color-border-soft: rgba(6, 51, 74, 0.1); --color-shadow: rgba(6, 51, 74, 0.15); /* Lower alpha than the dark theme's grid: dark-on-light grids read perceptually heavier than light-on-dark at the same alpha. */ --color-grid-line: rgba(6, 51, 74, 0.03); } /* AUTO mode — follow the OS when no manual choice has been persisted. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --color-surface: #f6f8fa; --color-surface-elevated: rgba(6, 51, 74, 0.04); --color-surface-elevated-strong: rgba(6, 51, 74, 0.08); --color-text: #06334a; --color-text-muted: rgba(6, 51, 74, 0.7); --color-text-faint: rgba(6, 51, 74, 0.5); --color-border: rgba(6, 51, 74, 0.18); --color-border-soft: rgba(6, 51, 74, 0.1); --color-shadow: rgba(6, 51, 74, 0.15); --color-grid-line: rgba(6, 51, 74, 0.03); } } html { scroll-behavior: smooth; } body { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: var(--helea-text); background-color: var(--helea-bg); display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; line-height: 1.2; } a { color: inherit; text-decoration: none; } /* =========================== Navbar =========================== The navbar's surface, text, border and dropdown shadow all read from the semantic theme tokens, so flipping [data-theme] on retints the header for free. Bootstrap's data-bs-theme on the