/* ==========================================================================
PREVET APP — SHARED DESIGN TOKENS
Single source of truth for the dark/light theme palettes.
Every page links this file BEFORE its main stylesheet (style.css,
login.css, or portal.css), so these variables are in scope for all three:
Do NOT redefine these variables in those files — add or change tokens here
so all pages stay in sync. Theme switching is driven by the data-theme
attribute that assets/js/theme.js sets on .
========================================================================== */
:root, html[data-theme="dark"] {
color-scheme: dark;
--bg: #070a14;
--bg-radial: #131c35;
/* Page wash. Dark keeps its top-right radial bloom. */
--page-gradient: radial-gradient(1200px 700px at 80% -10%, var(--bg-radial) 0%, var(--bg) 60%);
--panel: rgba(15, 23, 42, 0.78);
--panel-solid: #0f172a;
--panel-2: rgba(19, 29, 53, 0.82);
--line: rgba(56, 189, 248, 0.18);
--line-hover: rgba(56, 189, 248, 0.45);
--text: #f8fafc;
--muted: #cbd5e1;
--muted-2: #94a3b8;
--brand: #00f2fe;
--brand-2: #38bdf8;
--brand-gradient: linear-gradient(135deg, #00f2fe 0%, #0072ff 50%, #a855f7 100%);
--brand-shadow: 0 8px 30px -2px rgba(0, 242, 254, 0.45);
--good: #00f2fe;
--good-bg: rgba(0, 242, 254, 0.16);
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, 0.16);
/* lightened from #ff4757, which fell to 4.3–4.4:1 for risk badges sitting on
the lighter --panel-2 surfaces (carousel and provider cards) */
--bad: #ff5f6d;
--bad-bg: rgba(255, 71, 87, 0.16);
--chip: #1e293b;
--shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 20px 0 rgba(0, 242, 254, 0.12);
--modal-bg: rgba(3, 7, 18, 0.85);
--ai-bg: linear-gradient(135deg, rgba(0, 242, 254, 0.14), rgba(168, 85, 247, 0.12));
--active-psp-bg: rgba(0, 242, 254, 0.14);
--savebar-bg: rgba(7, 10, 20, 0.92);
--orb-1: rgba(0, 242, 254, 0.28);
--orb-2: rgba(168, 85, 247, 0.22);
--r: 16px;
--glass-border: 1px solid rgba(255, 255, 255, 0.12);
--glass-glow: 0 0 30px rgba(0, 242, 254, 0.15);
}
html[data-theme="light"] {
color-scheme: light;
/* NEUTRAL GREY SURFACES.
The page sits below pure white so white cards genuinely lift off it
(card-to-page luminance ratio 1.10; at the original #f8fafc it was 1.04 —
visually a single flat surface). Dark mode gets away with less separation
because its glowing borders read at 8.5:1; light mode has no such assist.
Every surface here is neutral by design: blue channel within 3 points of
red. Slate/indigo tints were what made the theme read "bluey" — they are
deliberately not used for backgrounds, borders, chips or shadows. The ink
tokens below stay cool for legibility. */
--bg: #f5f4f2;
--bg-radial: #fdfcfb;
/* Light uses a horizontal sweep instead: lighter grey on the left easing
into the base grey on the right. */
--page-gradient: linear-gradient(to right, var(--bg-radial) 0%, var(--bg) 100%);
--panel: rgba(255, 255, 255, 0.92);
--panel-solid: #ffffff;
--panel-2: rgba(246, 245, 243, 0.94);
--line: #d8d5d1;
--line-hover: #60a5fa;
/* Neutral ink to match the neutral surfaces. The slate family (#0f172a /
#475569 / #64748b) carries a +27 to +34 blue cast, which reads distinctly
blue-grey against a neutral page — body copy is a large area, so this was
as much a source of the blue as the background itself. Luminance is matched
to the slate values so all contrast ratios hold. */
--text: #1c1a18;
--muted: #524e49;
--muted-2: #6b645e;
/* blue-700; #2563eb fell to 4.46:1 for links and tags on the neutral page */
--brand: #1d4ed8;
--brand-2: #3b82f6;
--brand-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #7c3aed 100%);
--brand-shadow: 0 8px 25px -4px rgba(37, 99, 235, 0.40);
/* Semantic colours are darkened one step from their dark-theme siblings.
Each is normally drawn ON its own 12% tint, so the tint — not the white
card — is the real background. The 600-weights failed there (good 3.26,
warn 2.80, bad 3.89); these 700-weights clear AA on the tint and stay
comfortably legible on plain white. */
--good: #046c4e;
--good-bg: rgba(5, 150, 105, 0.12);
--warn: #92400e;
--warn-bg: rgba(217, 119, 6, 0.12);
--bad: #ab1236;
--bad-bg: rgba(225, 29, 72, 0.12);
--chip: #f3f2f0;
/* Three-layer elevation (contact / mid / ambient), cast in neutral grey
rather than slate — a navy-tinted shadow re-introduces blue at every card
edge. The old single 0.12 wash plus a blue 1px ring read as haze, not lift. */
--shadow: 0 1px 2px rgba(28, 26, 24, 0.05),
0 4px 12px -2px rgba(28, 26, 24, 0.08),
0 20px 40px -12px rgba(28, 26, 24, 0.15);
--modal-bg: rgba(15, 23, 42, 0.50);
--ai-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.08));
--active-psp-bg: rgba(37, 99, 235, 0.10);
--savebar-bg: rgba(255, 255, 255, 0.94);
/* Neutral grey blooms. These are 550px blobs blurred 100px in the page
corners — as blue/violet they were the single biggest source of the blue
cast, tinting a large area of every screen. As soft greys they still give
the page depth without colouring it. */
--orb-1: rgba(150, 145, 138, 0.20);
--orb-2: rgba(138, 136, 140, 0.16);
--r: 16px;
--glass-border: 1px solid rgba(255, 255, 255, 0.6);
--glass-glow: 0 10px 30px rgba(37, 99, 235, 0.10);
}