/* =============================================================================
NEW ERA — Task Hub · Design Tokens
Single source of truth for colors, type, spacing, radii and shadows.
Light theme = :root / Dark theme = .dark (apply on a root wrapper element).
Fonts (load in ):
- Poppins → headings, labels, buttons, badges (var --font)
- Plus Jakarta Sans → body copy, table cells, descriptions (var --font-body)
- ui-monospace → counters, periods, code-like values (system mono)
============================================================================= */
:root {
/* ---- Surfaces & ink (warm cream canvas, dark-indigo ink) ---- */
--bg: #f5f4ec; /* app canvas */
--bg-2: #efeee4; /* subtle fills, tracks, column bg */
--surface: #ffffff; /* cards, tables, panels */
--ink: #1d1a33; /* headings, primary text */
--ink-2: #3a3654; /* body / strong secondary */
--muted: #74708a; /* secondary text */
--faint: #9b97ad; /* tertiary / placeholders */
--line: #e7e5da; /* borders */
--line-soft: #efeee6; /* inner dividers */
/* ---- Brand accent (violet) ---- */
--accent: #6c2bd9; /* primary brand */
--accent-ink: #5a1fc0; /* accent text on light */
--accent-soft: #f1eafe; /* accent tint bg (badges, hovers) */
--accent-soft-line: #e4d6fb; /* accent tint border */
/* ---- Near-black action button (Triage, Genera, Archivia…) ---- */
--dark-btn: #1b1830;
--dark-btn-hov: #2c2850;
/* ---- Functional status hues (moderate chroma, oklch) ---- */
--pri-alta: oklch(0.62 0.16 25); /* high / danger / failed */
--pri-alta-soft: oklch(0.95 0.04 25);
--pri-media: oklch(0.72 0.13 70); /* medium / waiting */
--pri-media-soft: oklch(0.95 0.05 78);
--pri-bassa: oklch(0.66 0.11 155); /* low / success / done */
--pri-bassa-soft: oklch(0.95 0.04 155);
/* ---- Geometry ---- */
--radius: 16px; /* cards, panels, tables */
--radius-sm: 11px; /* compact cards, inputs, chips */
--gap: 14px; /* default vertical rhythm between list items */
/* ---- Elevation ---- */
--shadow-card: 0 1px 2px rgba(29,26,51,.04), 0 4px 16px rgba(29,26,51,.04);
--shadow-card-hov: 0 2px 4px rgba(29,26,51,.06), 0 10px 30px rgba(108,43,217,.10);
/* ---- Type families ---- */
--font: "Poppins", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}
/* =============================================================================
DARK THEME
Apply the `.dark` class on the app root. Only the tokens change — every
component below references vars, so the whole UI re-themes automatically.
⚠️ IMPORTANT (Chromium gotcha): a property that has a CSS `transition` will
NOT re-resolve when only an inherited custom property changes. So when you
flip the theme, briefly disable transitions for one frame:
root.classList.add('theme-switching');
void document.body.offsetHeight; // force reflow
requestAnimationFrame(() =>
requestAnimationFrame(() => root.classList.remove('theme-switching')));
with CSS:
.theme-switching, .theme-switching * { transition: none !important; }
============================================================================= */
.dark {
--bg: #14121d;
--bg-2: #211d2e;
--surface: #1d1a28;
--ink: #f4f2fa;
--ink-2: #d6d2e3;
--muted: #9893ac;
--faint: #6c6781;
--line: #2d2940;
--line-soft: #262236;
--accent-ink: #b89bf5; /* lighter accent text for contrast */
--accent-soft: rgba(108,43,217,.20);
--accent-soft-line: rgba(124,71,224,.40);
--dark-btn: #6c2bd9; /* action button → accent on dark */
--dark-btn-hov: #7d40e6;
--pri-alta-soft: oklch(0.32 0.07 25);
--pri-media-soft: oklch(0.33 0.06 75);
--pri-bassa-soft: oklch(0.32 0.06 155);
--shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
--shadow-card-hov: 0 2px 4px rgba(0,0,0,.35), 0 10px 30px rgba(108,43,217,.28);
}
/* Note: a handful of "info blue" chips (status ASSIGNED, AM report type, the
Lorenzo mailbox pill) use a fixed blue that needs a dark override too:
.dark .st-assigned, .dark .mc-blue, .dark .rt-am {
background: rgba(82,107,200,.22); color: #a9bdf5;
}
See new-era-styles.css for the full set of dark overrides. */