/* =============================================================================
theme-cquence.css — CQuence Health palette
-----------------------------------------------------------------------------
Load AFTER base.css:
Colors derived from the live site (www.cquencehealth.com): deep blue
#055399 primary, bright azure #00a1db accent, #003f7b deepest, #171717 text.
Deep blue is the interactive color (white text on it passes WCAG AAA); azure
is reserved for highlights, focus, and info so it never carries body text.
Dark mode follows the OS setting; force it with
(or "light" to pin the light theme).
========================================================================== */
:root {
/* Brand palette (raw hues, for direct use) */
--brand-navy: #055399; /* primary blue */
--brand-navy-deep: #003f7b; /* deepest blue */
--brand-blue: #00a1db; /* bright azure accent */
--brand-sky: #66c7ec; /* light azure (derived) */
--brand-green: #98c11d;
--brand-gold: #e58922;
--brand-red: #da2e36;
/* Surfaces */
--bg: #f2f2f2;
--surface: #ffffff;
--surface-2: #f9f9f9;
--surface-3: #eef0f1;
--border: #dfe1e1;
--border-strong: #c9cdce;
/* Text */
--text: #171717;
--text-muted: #5f6a70;
--heading: #055399;
--link: #055399;
/* Interactive / accent */
--accent: #055399;
--accent-hover: #003f7b;
--accent-contrast: #ffffff;
--focus-ring: rgba(0, 161, 219, 0.30);
/* Status */
--success: #98c11d;
--warning: #e58922;
--danger: #da2e36;
--info: #00a1db;
}
/* ===== Dark mode ========================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg: #0e1a24;
--surface: #152430;
--surface-2: #1c2f3d;
--surface-3: #243748;
--border: #2a3d4c;
--border-strong: #3a4f60;
--text: #e6eef4;
--text-muted: #9fb2c0;
--heading: #7ecbee;
--link: #4db8e8;
--accent: #1173c0;
--accent-hover: #2a8fd6;
--focus-ring: rgba(0, 161, 219, 0.40);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65);
}
}
:root[data-theme='dark'] {
--bg: #0e1a24;
--surface: #152430;
--surface-2: #1c2f3d;
--surface-3: #243748;
--border: #2a3d4c;
--border-strong: #3a4f60;
--text: #e6eef4;
--text-muted: #9fb2c0;
--heading: #7ecbee;
--link: #4db8e8;
--accent: #1173c0;
--accent-hover: #2a8fd6;
--focus-ring: rgba(0, 161, 219, 0.40);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65);
}