/* DCSY Intelligence Platform — Dark theme ───────────────────────────────────────────────────────────────── This file contains NO layout and NO new selectors for components. It only re-points the design tokens declared in style.css :root. If a dark-mode bug turns out to need a component rule here, that's a signal the component hardcoded a colour — fix it in style.css by swapping the literal for a token instead of patching it here. Loaded AFTER style.css in base.html, gated on which the no-FOUC head script sets before first paint. Palette notes: - Surfaces climb rather than the text dimming: bg #0f1319 → surface #171c24 → surface-2 #1e2530. Elevation reads as lighter, matching the light theme's shadow logic. - Pure black is avoided (halation on OLED, and shadows have nowhere to go). Pure white text is avoided too — #e8eaed at ~15.8:1 on the page background is plenty and far easier on the eyes for the long bookkeeping sessions this app is used for. - Tonal chips become a translucent tint of their hue with a bright foreground, instead of the light theme's pastel fill with a dark foreground. Same semantic colour, inverted contrast direction. ───────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; /* Brand accents — lifted, because the light-theme blues/greens go muddy against a dark field at their original luminance. */ --primary: #5b9bff; --primary-hover: #7db0ff; --danger: #f87171; --success: #4ade80; --warning: #fbbf24; /* Solid fills stay saturated -- see the note in style.css. White label contrast on these: primary 4.9:1, danger 4.7:1, success 5.2:1. Using the bright --primary/--danger/--success above as a button fill would give ~2.8:1 and fail AA. */ --primary-solid: #2f6fe0; --danger-solid: #d63b3b; --success-solid: #15803d; /* Neutral ramp, inverted. Every existing var(--gray-N) usage in style.css and the module CSS follows from this one block. */ --gray-50: #1a2028; --gray-100: #232a34; --gray-200: #2d3541; --gray-300: #3d4757; --gray-500: #9aa4b2; --gray-600: #b3bcc7; --gray-700: #c9d1da; --gray-900: #e8eaed; /* Semantic surfaces */ --bg: #0f1319; --surface: #171c24; --surface-2: #1e2530; --text: #e8eaed; --text-muted: #9aa4b2; --border: #2a323d; --border-strong: #3a4452; /* Rail stays dark but separates from the darker page behind it */ --rail-bg: #12161d; --rail-text: #f1f3f5; --rail-text-dim: #a8b2be; --rail-border: rgba(255,255,255,0.07); --rail-hover: rgba(255,255,255,0.06); /* Tonal pairs — translucent tint + bright foreground */ --tone-green-bg: rgba(74,222,128,0.14); --tone-green-fg: #6ee7a0; --tone-blue-bg: rgba(91,155,255,0.16); --tone-blue-fg: #8ab4ff; --tone-amber-bg: rgba(251,191,36,0.15); --tone-amber-fg: #fbbf24; --tone-red-bg: rgba(248,113,113,0.15); --tone-red-fg: #fca5a5; --tone-gray-bg: rgba(154,164,178,0.14); --tone-gray-fg: #c9d1da; --tone-indigo-bg: rgba(129,140,248,0.16); --tone-indigo-fg: #a5b4fc; --tone-purple-bg: rgba(167,139,250,0.16); --tone-purple-fg: #c4b5fd; --tone-violet-bg: rgba(192,132,252,0.14); --tone-violet-fg: #d8b4fe; --tone-teal-bg: rgba(45,212,191,0.14); --tone-teal-fg: #5eead4; --tone-mint-bg: rgba(52,211,153,0.15); --tone-mint-fg: #6ee7b7; --tone-amber-border: rgba(251,191,36,0.35); --tone-mint-border: rgba(52,211,153,0.35); /* Shadows need more opacity to read at all on a dark field */ --shadow: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px rgba(0,0,0,0.55); --focus-ring: rgba(91,155,255,0.25); --overlay: rgba(0,0,0,0.66); } /* ── Cross-cutting fixes that can't be expressed as a token ───────── */ /* Scanned documents, logos and chart canvases are authored for a white page. Knocking their brightness down slightly stops them glaring without distorting colour — important for DCScan, where the reviewer is reading a receipt against the extracted fields. */ :root[data-theme="dark"] .doc-viewer img, :root[data-theme="dark"] .doc-viewer canvas, :root[data-theme="dark"] #pdf-canvas, :root[data-theme="dark"] #doc-image { filter: brightness(0.88) contrast(1.02); } /* The DCSY wordmark in the sidebar is a white-on-transparent PNG in the light theme's dark rail — it already works. The dark-on-transparent variant used on light surfaces (login card, PDF header) would vanish, so invert it there. */ :root[data-theme="dark"] .login-card img[src*="logo"]:not([src*="white"]) { filter: invert(1) hue-rotate(180deg); } /* Native scrollbars — color-scheme handles Firefox and Safari; Chromium needs the explicit rule to avoid a light gutter against dark content. */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 6px; border: 3px solid var(--bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } /* Date/time pickers render their calendar glyph in black by default. */ :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* Placeholder text sits too close to body text at the inverted ramp. */ :root[data-theme="dark"] ::placeholder { color: var(--gray-500); opacity: 1; }