/* ─────────────────────────────────────────────────────────────────
DC Hub — Shared Brand Stylesheet
Phase FF+25-followup-brand (2026-05-20)
Drop-in dark theme for any page that's still on a white background
or off-brand styling. Applies the same design tokens used by the
refined homepage (/refined) so the whole site shares ONE visual
language.
Usage: add to the of any page:
Applied via root-level CSS variables + !important on body/section
to win against page-level inline styles WITHOUT having to rewrite
each page. Page-specific tweaks can still override by being more
specific than the body selector.
───────────────────────────────────────────────────────────────── */
:root {
/* ── Canvas + surface ── */
--dch-bg: #0a0a0f;
--dch-surface: #131319;
--dch-surface-2: #1a1a22;
--dch-border: rgba(255,255,255,0.08);
/* ── Type ── */
--dch-text: #fafafa;
--dch-text-mute: #a1a1aa;
--dch-text-dim: #71717a;
/* ── Brand accents (matches index.html + refined.html) ── */
--dch-indigo: #818cf8;
--dch-indigo-deep: #6366f1;
--dch-violet: #a855f7;
--dch-teal: #10b981;
--dch-grad-brand: linear-gradient(135deg, var(--dch-indigo-deep) 0%, var(--dch-violet) 100%);
--dch-grad-text: linear-gradient(135deg, #10a37f 0%, #4285f4 50%, #9b72cb 100%);
/* ── Status colors (for tables / status pills) ── */
--dch-ok: #10b981;
--dch-warn: #f59e0b;
--dch-err: #ef4444;
/* ─────────────────────────────────────────────────────────────
Phase r33-I (2026-05-21) — LEGACY VAR ALIASES.
Many pages built in earlier phases used their own var names
for the same logical role: --accent, --primary, --link,
--blue, --purple, --bg-primary, --bg-secondary, --text-primary,
etc. They WIN against --dch-* because they're page-scoped.
By declaring those legacy var names HERE in :root with the
canonical brand values, every page that links dchub-brand.css
picks up the unified palette WITHOUT having to edit each page.
Page-specific overrides still win — but the default is now
brand-aligned instead of off-brand blue/purple/Inter chaos.
───────────────────────────────────────────────────────────── */
/* Accent + primary + link — point at brand-indigo */
--accent: var(--dch-indigo);
--accent-deep: var(--dch-indigo-deep);
--accent-glow: rgba(129, 140, 248, .3);
--primary: var(--dch-indigo);
--link: var(--dch-indigo);
--link-hover: var(--dch-violet);
/* Common color-name vars used on legacy pages */
--blue: var(--dch-indigo);
--purple: var(--dch-violet);
--indigo: var(--dch-indigo);
--violet: var(--dch-violet);
--pink: var(--dch-violet);
--cyan: #22d3ee;
/* Background + surface aliases */
--bg: var(--dch-bg);
--bg-primary: var(--dch-bg);
--bg-secondary: var(--dch-surface);
--bg-card: var(--dch-surface);
--bg-tertiary: var(--dch-surface-2);
--surface: var(--dch-surface);
--surface-2: var(--dch-surface-2);
--panel: var(--dch-surface);
--card-bg: var(--dch-surface);
/* Text aliases */
--fg: var(--dch-text);
--text: var(--dch-text);
--text-primary: var(--dch-text);
--text-secondary: var(--dch-text-mute);
--text-muted: var(--dch-text-mute);
--text-dim: var(--dch-text-dim);
--muted: var(--dch-text-mute);
--dim: var(--dch-text-dim);
/* Border aliases */
--border: var(--dch-border);
--border-strong: rgba(255,255,255,0.12);
--border-color: var(--dch-border);
/* Status aliases */
--success: var(--dch-ok);
--green: var(--dch-ok);
--ok: var(--dch-ok);
--warning: var(--dch-warn);
--orange: var(--dch-warn);
--warn: var(--dch-warn);
--danger: var(--dch-err);
--red: var(--dch-err);
--error: var(--dch-err);
/* Brand gradient aliases */
--gradient-brand: var(--dch-grad-brand);
--grad-brand: var(--dch-grad-brand);
--hero-gradient: var(--dch-grad-brand);
/* Canonical font stack — applies to pages that reference
var(--font-sans) instead of hard-coding Inter/Instrument */
--font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont,
"SF Pro Display", "Inter", sans-serif;
--font-mono: 'JetBrains Mono', "SF Mono", Menlo, Consolas, monospace;
--font-display: 'Instrument Sans', -apple-system, sans-serif;
}
/* Force Instrument Sans font even on pages that hard-coded Inter or
DM Sans in their body{} block. The * selector + !important wins
against page-level inline styles. Loaded fonts only — if a page
forgot the Google Fonts , system fallback kicks in. */
body, body * {
font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont,
"SF Pro Display", sans-serif !important;
}
code, pre, .mono, [class*="mono"], [class*="code"] {
font-family: 'JetBrains Mono', "SF Mono", Menlo, Consolas, monospace !important;
}
/* Force dark canvas on any page that includes this file.
The !important is needed because many pages have inline body{} styles
from when they were built individually. Once those pages are cleaned
up, the !important can come off. */
body {
background: var(--dch-bg) !important;
color: var(--dch-text) !important;
font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont,
"SF Pro Display", "Inter", sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Most page wrappers default to white — neutralize */
main, .main, .content, .page, .container, .wrapper, .app,
.page-wrap, .layout, [class*="container"], [class*="wrapper"] {
background: transparent !important;
}
/* Table styling — common offender on /transactions */
table {
background: transparent !important;
color: var(--dch-text) !important;
}
table th {
background: var(--dch-surface) !important;
color: var(--dch-text) !important;
border-color: var(--dch-border) !important;
}
table td {
background: transparent !important;
color: var(--dch-text) !important;
border-color: var(--dch-border) !important;
}
table tr:hover td { background: var(--dch-surface-2) !important; }
/* Cards / panels — make sure they pick up the dark surface */
.card, .panel, .tile, .box, [class*="card"], [class*="panel"] {
background: var(--dch-surface) !important;
border-color: var(--dch-border) !important;
color: var(--dch-text) !important;
}
/* Standard text-on-white fixes */
h1, h2, h3, h4, h5, h6 { color: var(--dch-text) !important; }
p, li, label, dt, dd { color: var(--dch-text) !important; }
small, .muted, .secondary, .text-secondary { color: var(--dch-text-mute) !important; }
/* Links — keep brand-indigo so they read as clickable on dark bg */
a:not(.btn):not(.button):not([class*="nav"]):not([class*="card"]) {
color: var(--dch-indigo) !important;
}
a:not(.btn):not(.button):not([class*="nav"]):not([class*="card"]):hover {
color: var(--dch-violet) !important;
}
/* Buttons — preserve gradient brand */
.btn-primary, .button-primary, button.primary, [class*="btn-brand"] {
background: var(--dch-grad-brand) !important;
color: var(--dch-text) !important;
border: none !important;
}
/* Inputs / selects — make them readable on dark */
input, select, textarea {
background: var(--dch-surface) !important;
color: var(--dch-text) !important;
border-color: var(--dch-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--dch-text-dim) !important; }
/* Status pills (operational / construction / planned filters that
were 'hard to see' on white bg per user feedback) */
.status-pill, .filter-pill, .chip, [class*="pill"] {
background: var(--dch-surface) !important;
border: 1px solid var(--dch-border) !important;
color: var(--dch-text) !important;
}
.status-pill.active, .filter-pill.active, .chip.active,
.status-pill[aria-pressed="true"], .filter-pill[aria-pressed="true"] {
background: var(--dch-grad-brand) !important;
color: var(--dch-text) !important;
border-color: transparent !important;
}