/*
* EVE AI Core — Government Security Design System
* Central theme file. Include on every page:
*
*
* Provides: design tokens, typography, header/nav, footer, utility classes.
* Individual pages only need page-specific layout CSS inline.
*/
/* Canonical shadcn-semantic token layer (light / dark / glass) — single source of truth */
@import url('/css/design-tokens.css?v=vd0906');
/* Enterprise component-state + interaction layer (loading/empty/error/success/disabled, focus, secure-UI) */
@import url('/css/enterprise-states.css?v=1');
/* Canonical typography & scale foundation (Design Phase 1) */
@import url('/css/eve-typography.css?v=1');
/* Shared UI components: page layout + PageHeader + banner (Design Phase 4+) */
@import url('/css/eve-components.css?v=vd0906');
/* Print / export report layer (@media print only — screen rendering untouched) */
@import url('/css/print-report.css?v=1');
/* Premium motion + depth + glass + animated trust visuals (single source of truth) */
@import url('/css/eve-motion.css?v=1');
/* ── Google Fonts (also loadable via in ) ─────────────── */
/* @import removed — fonts already loaded via in index.html to avoid render-blocking chain-load on mobile */
/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
/* Backgrounds — Dark by default (prevents FOUC; light theme overrides via [data-theme="light"]) */
--bg-primary: #08090c;
--bg-secondary: #14161d;
--bg-tertiary: #1c1f27;
--bg-card: rgba(20, 28, 46, 0.86);
--bg-header: rgba(11, 15, 23, 0.95);
/* Borders */
--border-primary: #2d313c;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.10);
/* Accent Colors */
--accent-primary: #4a90e2;
/* AA-safe fill for buttons w/ white text — auto-darkens per active theme.
white-on-#4a90e2 is only 3.29:1; the 78% mix lifts it past 4.5:1. */
--accent-primary-strong: color-mix(in srgb, var(--accent-primary) 78%, #000);
--accent-secondary: #c8a84e;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
/* Text */
--text-primary: #f4f6fa;
--text-secondary: #b3b9c6;
--text-heading: #f6f8fc;
--text-muted: #9aa1b0;
--text-muted-on-surface: #9aa1b0;
--text-on-accent: #ffffff;
/* A11y tokens — AA-verified (see scripts/check_contrast.py) */
--placeholder-color: #8b93a7; /* 5.77:1 on input surfaces */
--btn-disabled-bg: #2a3344;
--btn-disabled-text: #aeb6c4; /* 6.21:1 on disabled fill */
/* Semantic button FILL tokens -- AA-safe with a white label. */
--btn-danger-bg: #c2392f;
--btn-warning-bg: #b45309;
--btn-success-bg: #0a6f4d;
--btn-secondary-bg: #1f2937;
--status-allow-text: #34d399; /* status TEXT (dots use --accent-safe) */
--status-block-text: #ff7a7a; /* 7.04:1 on dark — critical 7:1 */
--status-warn-text: #fbbf24;
/* Typography */
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'Consolas', monospace;
/* Radii */
--radius-sm: 2px;
--radius-md: 4px;
/* ── Semantic Surface System ─────────────────────────────────────
* 5 elevation levels. Always use the paired --text-on-N and
* --text-muted-on-N tokens — never cross levels.
*
* Level | Use case
* ──────────────────────────────────────────────────────────────
* 0 | Page / body background
* 1 | Cards, panels, sidebar body
* 2 | Raised panels, inline popovers
* 3 | Modal dialogs, sheets
* 4 | Dropdowns, tooltips, floating menus (highest z-surface)
* ─────────────────────────────────────────────────────────────── */
/* Surface 0 — page */
--surface-0: #08090c;
--surface-0-border: rgba(255, 255, 255, 0.08);
--text-on-0: #f4f6fa;
--text-muted-on-0: #9aa1b0;
/* Surface 1 — cards / panels */
--surface-1: #14161d;
--surface-1-border: rgba(255, 255, 255, 0.07);
--text-on-1: #f4f6fa;
--text-muted-on-1: #9aa1b0;
/* Surface 2 — raised panels */
--surface-2: #1c1f27;
--surface-2-border: rgba(255, 255, 255, 0.09);
--text-on-2: #e6eaf2;
--text-muted-on-2: #9aa1b0;
/* Surface 3 — modals / sheets */
--surface-3: #20232c;
--surface-3-border: rgba(255, 255, 255, 0.11);
--text-on-3: #eef1f8;
--text-muted-on-3: #9aa1b0;
/* Surface 4 — dropdowns / tooltips */
--surface-4: #272b35;
--surface-4-border: rgba(255, 255, 255, 0.13);
--text-on-4: #eef1f8;
--text-muted-on-4: #9aa1b0;
/* Interactive overlays — add as ::before pseudo or background on :hover/:active */
--hover-overlay: rgba(255, 255, 255, 0.05);
--active-overlay: rgba(255, 255, 255, 0.09);
--focus-ring: rgba(74, 144, 226, 0.5);
/* ── Sidebar tokens — sidebar is ALWAYS dark regardless of page theme ── */
--sidebar-bg: #060708;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: rgba(255, 255, 255, 0.92);
--sidebar-text-muted: rgba(255, 255, 255, 0.68);
--sidebar-text-heading: #f0f2f8;
--sidebar-hover-bg: rgba(255, 255, 255, 0.07);
--sidebar-active-bg: rgba(74, 144, 226, 0.20);
--sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255, 255, 255, 0.66);
--sidebar-width: 220px;
--sidebar-collapsed: 60px;
/* ── Spacing scale (4-px grid) ────────────────────────────────────── */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
/* ── Typography scale ─────────────────────────────────────────────── */
--text-xs: 12px;
/* 13px step. The scale jumped 12 -> 14 with nothing between, so compact
UI that must read as CONTENT rather than caption (table column labels,
verdicts, nav labels, small buttons) had no token to reach for and fell
back to hardcoded 9-11px. */
--text-compact: 13px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
/* ── Line heights ─────────────────────────────────────────────────── */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* ── Border radii ─────────────────────────────────────────────────── */
/* --radius-sm and --radius-md defined above */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ── Shadows ──────────────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
/* ── Layout ───────────────────────────────────────────────────────── */
--page-max-width: 1400px;
--content-padding: 24px;
--section-gap: var(--space-8);
--card-padding: var(--space-6);
/* ── Alias: border-color → border-primary ─────────────────────────── */
--border-color: var(--border-primary);
}
/* ── Dark theme alias (same as :root defaults) ─────────────────────── */
[data-theme="dark"] {
--bg-primary: #08090c;
--bg-secondary: #14161d;
--bg-tertiary: #1c1f27;
--bg-card: rgba(20, 28, 46, 0.86);
--bg-header: rgba(11, 15, 23, 0.95);
--border-primary: #2d313c;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.10);
--accent-primary: #4a90e2;
--accent-secondary: #c8a84e;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #f4f6fa;
--text-secondary: #b3b9c6;
--text-heading: #f6f8fc;
--text-muted: #9aa1b0;
--text-on-accent: #ffffff;
--placeholder-color: #8b93a7;
--btn-disabled-bg: #2a3344; --btn-disabled-text: #aeb6c4;
--status-allow-text: #34d399; --status-block-text: #ff7a7a; --status-warn-text: #fbbf24;
/* Surface tokens — dark (same as :root) */
--surface-0: #08090c; --surface-0-border: rgba(255, 255, 255, 0.08); --text-on-0: #f4f6fa; --text-muted-on-0: #9aa1b0;
--surface-1: #14161d; --surface-1-border: rgba(255,255,255,0.07); --text-on-1: #f4f6fa; --text-muted-on-1: #9aa1b0;
--surface-2: #161b35; --surface-2-border: rgba(255,255,255,0.09); --text-on-2: #e6eaf2; --text-muted-on-2: #9aa1b0;
--surface-3: #20232c; --surface-3-border: rgba(255,255,255,0.11); --text-on-3: #eef1f8; --text-muted-on-3: #9aa1b0;
--surface-4: #272b35; --surface-4-border: rgba(255,255,255,0.13); --text-on-4: #eef1f8; --text-muted-on-4: #9aa1b0;
--hover-overlay: rgba(255,255,255,0.05); --active-overlay: rgba(255,255,255,0.09); --focus-ring: rgba(74,144,226,0.5);
/* Sidebar tokens — dark theme (same as :root) */
--sidebar-bg: #060708; --sidebar-border: rgba(255,255,255,0.08);
--sidebar-text: rgba(255, 255, 255, 0.92); --sidebar-text-muted: rgba(255, 255, 255, 0.68);
--sidebar-text-heading: #e2e6ef; --sidebar-hover-bg: rgba(255,255,255,0.05);
--sidebar-active-bg: rgba(74,144,226,0.20); --sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255, 255, 255, 0.66);
}
/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── Base Typography ───────────────────────────────────────────────── */
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
/* ── Header / Navigation ──────────────────────────────────────────── */
.theme-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-header);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-primary);
z-index: 100;
}
.theme-logo {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
text-decoration: none;
color: var(--text-heading);
}
.theme-logo-icon {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.theme-nav {
display: flex;
gap: 24px;
align-items: center;
}
.theme-nav a {
color: var(--text-secondary);
text-decoration: none;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: color 0.2s;
}
.theme-nav a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
.theme-nav a.active {
color: var(--accent-primary);
}
/* ── Footer ────────────────────────────────────────────────────────── */
/* All footer variants always use dark background — never white, regardless of theme */
.footer, .footer--simple, .theme-footer, .app-footer {
background: #0a0e1a !important;
border-top-color: #212329 !important;
}
[data-theme="light"] .footer,
[data-theme="light"] .footer--simple,
[data-theme="light"] .theme-footer,
[data-theme="light"] .app-footer {
background: #0a0e1a !important;
border-top-color: #212329 !important;
color: #7a8299 !important;
}
[data-theme="light"] .footer-links a,
[data-theme="light"] .theme-footer a,
[data-theme="light"] .app-footer a {
color: #9aa3b8 !important; /* readable on the dark #0a0e1a footer kept in light mode */
}
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .theme-footer a:hover,
[data-theme="light"] .app-footer a:hover {
color: #e6e9f0 !important;
}
[data-theme="light"] .footer-brand h3,
[data-theme="light"] .footer-links h4,
[data-theme="light"] .footer-bottom {
color: #c8cdd8 !important;
border-top-color: #212329 !important;
}
.theme-footer {
text-align: center;
padding: 40px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
border-top: 1px solid var(--border-primary);
}
.theme-footer a {
color: var(--accent-primary);
text-decoration: none;
}
.theme-footer a:hover {
color: var(--accent-primary);
filter: brightness(1.25);
}
.theme-footer-brand {
margin-top: 8px;
opacity: 0.5;
}
/* ── Section Headers ───────────────────────────────────────────────── */
.section-label {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-secondary);
}
.page-classification {
text-align: center;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-secondary);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 32px;
/* VISUAL AUDIT 2026-09-05: `opacity:0.6` was compositing this 10px label
toward its background — rgb(103,111,135) washed to rgb(159,165,180) on
rgb(244,246,248), i.e. 2.27:1, well under AA, on the legal/policy pages.
--text-secondary is ALREADY the muted tone, so the opacity was buying
nothing but illegibility; at full alpha the same colour is 4.57:1 and the
label still reads as a subdued classification stamp.
(Static contrast linting misses this class of bug entirely: the declared
colour passes, and only the composited result fails.) */
}
/* ── Buttons ───────────────────────────────────────────────────────── */
/* ===================================================================
EVE UNIFIED BUTTON SYSTEM -- single source of truth.
NOTE: mirrored verbatim into app-core.css. Keep both copies in sync.
Token-driven -> light/dark via [data-theme]. ADDITIVE: existing markup
keeps working; later page CSS may still override per-page where intentional.
Variants: primary secondary outline ghost danger warning success icon
Sizes: .btn-sm . (default) . .btn-lg . .btn-block
States: :hover :active :focus-visible :disabled/.btn-disabled .btn-loading
=================================================================== */
.btn {
--btn-eq-ink: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid transparent; /* identical box for solid & outline -> no hover jump */
border-radius:0;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
vertical-align: middle;
box-sizing: border-box;
position: relative;
cursor: pointer;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, border-color 0.15s ease,
color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn > svg { width: 1em; height: 1em; flex: 0 0 auto; }
/* Visible keyboard focus -- works on dark & light, no layout shift */
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--bg-primary, #0b0f17), 0 0 0 4px var(--focus-ring);
}
/* -- Variants -- */
.btn-primary { background: #2f6fd0; color: #fff; border-color: #2f6fd0; --btn-eq-ink: #fff; box-shadow: 0 6px 22px rgba(91,158,232,.28); }
.btn-primary:hover { background: #2861c0; border-color: #2861c0; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(91,158,232,.42); }
.btn-primary:active { filter: brightness(0.95); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--text-primary); border-color: var(--border-primary); }
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text-heading); }
.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-primary); }
.btn-outline:hover { border-color: var(--border-hover); color: var(--text-heading); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: transparent; }
.btn-ghost:hover { background: var(--hover-overlay); color: var(--text-heading); }
.btn-danger { background: var(--btn-danger-bg); color: #fff; --btn-eq-ink: #fff; }
.btn-warning { background: var(--btn-warning-bg); color: #fff; --btn-eq-ink: #fff; }
.btn-success { background: var(--btn-success-bg); color: #fff; --btn-eq-ink: #fff; }
.btn-danger:hover, .btn-warning:hover, .btn-success:hover { filter: brightness(1.1); color: #fff; }
.btn-danger:active, .btn-warning:active, .btn-success:active { filter: brightness(0.95); }
/* -- Sizes -- */
.btn-sm { padding: 6px 12px; font-size: 11px; gap: 6px; }
.btn-lg { padding: 16px 32px; font-size: 14px; gap: 10px; }
.btn-block { display: flex; width: 100%; }
/* -- Icon-only (markup must keep an aria-label) -- */
.btn-icon { padding: 0; width: 36px; height: 36px; gap: 0; flex: 0 0 auto; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-lg { width: 44px; height: 44px; }
/* -- Disabled -- no opacity dim (keeps AA); also blocks clicks -- */
.btn:disabled, .btn[disabled], .btn.btn-disabled, .btn[aria-disabled="true"] {
cursor: not-allowed; pointer-events: none; filter: none;
background: var(--btn-disabled-bg); color: var(--btn-disabled-text); border-color: transparent;
}
.btn-outline:disabled, .btn-outline.btn-disabled, .btn-outline[aria-disabled="true"],
.btn-ghost:disabled, .btn-ghost.btn-disabled, .btn-ghost[aria-disabled="true"],
.btn-secondary:disabled, .btn-secondary.btn-disabled, .btn-secondary[aria-disabled="true"] {
background: transparent; color: var(--btn-disabled-text); border-color: var(--border-primary);
}
/* -- Loading -- equalizer bars (EVE standard, never a spinner).
Label hidden, button keeps its width -> no layout shift; clicks blocked. -- */
.btn-loading { color: transparent !important; pointer-events: none; }
.btn-loading > * { visibility: hidden; }
.btn-loading::before, .btn-loading::after {
content: ""; position: absolute; top: 50%; width: 3px; height: 5px;
border-radius:0; background: var(--btn-eq-ink);
transform: translateY(-50%); animation: eve-btn-eq 0.7s ease-in-out infinite;
}
.btn-loading::before { left: calc(50% - 8px); animation-delay: 0s; }
.btn-loading::after { left: calc(50% - 1px); animation-delay: 0.2s; box-shadow: 8px 0 0 var(--btn-eq-ink); }
@keyframes eve-btn-eq { 0%, 100% { height: 5px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) {
.btn-loading::before, .btn-loading::after { animation: none; height: 10px; }
}
/* ── Cards ─────────────────────────────────────────────────────────── */
.theme-card {
background: var(--bg-card);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 24px;
transition: border-color 0.2s;
}
.theme-card:hover {
border-color: var(--border-hover);
}
/* ── Info / Alert / Status Boxes ───────────────────────────────────── */
.box-info {
background: rgba(74, 144, 226, 0.06);
border: 1px solid rgba(74, 144, 226, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-info h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-primary);
margin-bottom: 12px;
}
.box-alert {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-alert h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--danger-text, var(--accent-alert));
margin-bottom: 12px;
}
.box-status {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-status h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-safe);
margin-bottom: 12px;
}
.box-warning {
background: rgba(251, 191, 36, 0.06);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: var(--radius-md);
padding: 24px;
margin: 32px 0;
}
.box-warning h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-warning);
margin-bottom: 12px;
}
/* ── Code Blocks ───────────────────────────────────────────────────── */
.code-block {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 16px;
margin: 16px 0;
font-family: var(--font-mono);
font-size: 13px;
overflow-x: auto;
color: var(--text-primary);
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: rgba(74, 144, 226, 0.1);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* ── Monospace Labels (Section Titles, Table Headers) ──────────────── */
.mono-label {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-heading);
}
/* ── Legal Text ────────────────────────────────────────────────────── */
.legal-text {
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-mono);
line-height: 1.8;
}
/* ══════════════════════════════════════════════════════════════════════
THEME VARIANTS
Set via: (default)
Switch with: document.documentElement.dataset.theme = 'midnight';
══════════════════════════════════════════════════════════════════════ */
/* ── Midnight Theme ────────────────────────────────────────────────── */
[data-theme="midnight"] {
--bg-primary: #0b0d1a;
--bg-secondary: #111428;
--bg-card: rgba(17, 20, 40, 0.85);
--bg-header: rgba(11, 13, 26, 0.95);
--border-primary: #1e2850;
--border-hover: #2e3e6a;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #4a90e2;
--accent-secondary: #5ba0f2;
--accent-safe: #34d399;
--accent-alert: #f87171;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #cbd5e1;
--text-secondary: #6b7c95; /* AA: 4.55:1 on page (was #64748b 4.06) */
--text-heading: #e2e8f0;
--text-muted: #687c99; /* AA: 4.54:1 on page (was #475569 2.55) */
--text-on-accent: #ffffff;
--status-block-text: #ff7a7a;
}
/* ── Emerald Theme ─────────────────────────────────────────────────── */
[data-theme="emerald"] {
--bg-primary: #071210;
--bg-secondary: #0c1b17;
--bg-card: rgba(12, 27, 23, 0.85);
--bg-header: rgba(7, 18, 16, 0.95);
--border-primary: #14342c;
--border-hover: #1e5045;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #10b981;
--accent-primary-strong: #0a6f4d; /* white-on-fill 6.19:1 (78% mix gave 4.04) */
--accent-secondary: #6ee7b7;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #f59e0b;
--accent-governance: #818cf8;
--text-primary: #c2d8d0;
--text-secondary: #6d8f84;
--text-heading: #e0f0ea;
--text-muted: #5a8477; /* AA: 4.53:1 on page (was #4a6d62 3.31) */
--text-on-accent: #ffffff;
--status-block-text: #ff7a7a;
}
/* ── Amber Theme ───────────────────────────────────────────────────── */
[data-theme="amber"] {
--bg-primary: #12100a;
--bg-secondary: #1a1710;
--bg-card: rgba(26, 23, 16, 0.85);
--bg-header: rgba(18, 16, 10, 0.95);
--border-primary: #332a18;
--border-hover: #4d3f25;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #d97706;
--accent-secondary: #fbbf24;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #f59e0b;
--accent-governance: #818cf8;
--text-primary: #d4c8b0;
--text-secondary: #8c7d62;
--text-heading: #ede4d0;
--text-muted: #8b7a5b; /* AA: 4.56:1 on page (was #6b5e46 3.00) */
--text-on-accent: #ffffff;
--status-block-text: #ff7a7a;
}
/* ── Crimson Theme ─────────────────────────────────────────────────── */
[data-theme="crimson"] {
--bg-primary: #120a0e;
--bg-secondary: #1a1015;
--bg-card: rgba(26, 16, 21, 0.85);
--bg-header: rgba(18, 10, 14, 0.95);
--border-primary: #331828;
--border-hover: #4d253d;
--border-subtle: rgba(255, 255, 255, 0.05);
--accent-primary: #e11d48;
--accent-secondary: #fb7185;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #d4b8c4;
--text-secondary: #9a6c84; /* AA: 4.51:1 on page (was #8c6278 3.84) */
--text-heading: #ede0e6;
--text-muted: #a16984; /* AA: 4.53:1 on page (was #6b4658 2.46) */
--text-on-accent: #ffffff;
--status-block-text: #ff7a7a;
}
/* ── Light Theme ───────────────────────────────────────────────────── */
[data-theme="light"] {
--bg-primary: #f0f2f5;
--bg-secondary: #e5e7eb;
--bg-tertiary: #d1d5db;
--bg-card: rgba(255, 255, 255, 0.9);
--bg-header: rgba(10, 14, 26, 0.97); /* header always dark, even in light mode */
--border-primary: #d1d5db;
--border-hover: #9ca3af;
--border-subtle: rgba(0, 0, 0, 0.07);
--accent-primary: #2563eb;
--accent-secondary: #3a7bd0;
--accent-safe: #16a34a;
--accent-alert: #dc2626;
--accent-warning: #d97706;
--accent-governance: #4f46e5;
--text-primary: #374151;
--text-secondary: #686f7c; /* AA: 4.51:1 on page (was #6b7280 4.31) */
--text-heading: #0e0f13;
--text-muted: #6a6f77; /* AA: 4.51:1 on page (was #9ca3af 2.26) */
/* Muted text sitting on --bg-secondary rather than the page background.
--text-muted is tuned for AA against the PAGE (see its comment); on the
secondary surface it lands at 4.08:1 and fails 1.4.3. Same idea as the
existing --text-muted-on-0. Light 6.12:1, dark 6.84:1. */
--text-muted-on-surface: #475569;
--text-on-accent: #ffffff;
--placeholder-color: #5b6472; /* 5.33:1 on light surfaces */
--btn-disabled-bg: #cbd5e1; --btn-disabled-text: #3f4655;
--btn-danger-bg: #b91c1c; --btn-warning-bg: #a44908; --btn-success-bg: #0a6f4d; --btn-secondary-bg: #e9edf2;
--status-allow-text: #0d5d2a; --status-block-text: #9e1b1b; --status-warn-text: #7a4303; /* critical 7:1 on light */
/* Surface tokens — light theme flips */
--surface-0: #f0f2f5; --surface-0-border: rgba(0,0,0,0.07); --text-on-0: #374151; --text-muted-on-0: #686f7c;
--surface-1: #ffffff; --surface-1-border: rgba(0,0,0,0.08); --text-on-1: #15171c; --text-muted-on-1: #6b7280;
--surface-2: #f8fafc; --surface-2-border: rgba(0,0,0,0.08); --text-on-2: #15171c; --text-muted-on-2: #64748b;
--surface-3: #ffffff; --surface-3-border: rgba(0,0,0,0.10); --text-on-3: #0e0f13; --text-muted-on-3: #6b7280;
--surface-4: #ffffff; --surface-4-border: rgba(0,0,0,0.12); --text-on-4: #0e0f13; --text-muted-on-4: #6b7280;
--hover-overlay: rgba(0,0,0,0.04); --active-overlay: rgba(0,0,0,0.07); --focus-ring: rgba(37,99,235,0.4);
/* Sidebar tokens — light theme keeps sidebar DARK (sidebar never flips to light) */
--sidebar-bg: #060708; --sidebar-border: rgba(255,255,255,0.08);
--sidebar-text: rgba(255,255,255,0.72); --sidebar-text-muted: rgba(255,255,255,0.56);
--sidebar-text-heading: #e2e6ef; --sidebar-hover-bg: rgba(255,255,255,0.05);
--sidebar-active-bg: rgba(74,144,226,0.20); --sidebar-active-text: #4a90e2;
--sidebar-section-text: rgba(255,255,255,0.56);
}
/* ── Theme Nav Toggle (header dropdown) ───────────────────────────── */
#theme-nav-toggle {
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
transition: color 0.2s;
user-select: none;
}
#theme-nav-toggle:hover {
color: var(--text-heading);
}
.theme-nav-dropdown {
position: absolute;
top: calc(100% + 12px);
right: -12px;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
padding: 8px 0;
min-width: 180px;
z-index: 200;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
transition: background 0.15s, color 0.15s;
}
.theme-nav-item:hover {
background: rgba(74, 144, 226, 0.08);
color: var(--text-heading);
}
.theme-nav-item.active {
color: var(--accent-primary);
}
.theme-nav-item.active::after {
content: '✓';
margin-left: auto;
font-size: 10px;
}
.theme-nav-swatch {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Mobile Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.theme-header {
padding: 12px 20px;
}
.theme-nav {
gap: 16px;
}
.theme-nav a {
font-size: 11px;
}
.btn {
padding: 10px 18px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.theme-header {
padding: 10px 16px;
}
.theme-nav {
gap: 12px;
}
.theme-nav a {
font-size: 10px;
letter-spacing: 0.05em;
}
}
/* ============================================================
CONTRAST GUARD -- WCAG 4.5:1 minimum enforcement
These !important rules override any per-component color that
would produce white-on-white or black-on-dark failures.
Targets: sidebar text, veto/alert banners, ledger tables.
IMPORTANT: The sidebar is ALWAYS dark regardless of page theme.
Sidebar text rules therefore ALWAYS use --sidebar-text (light
values) and must NEVER be overridden with dark colors from the
light theme token set.
============================================================ */
/* ── Sidebar: guaranteed light text on always-dark sidebar background ── */
/* Nav items, section labels, nav text use sidebar-specific tokens */
.sidebar .nav-item-label,
.sidebar .section-label,
.sidebar [class*="nav-text"],
.sidebar [class*="sidebar-label"] {
color: var(--sidebar-text) !important;
}
/* Chat history items that may appear inside sidebar */
.sidebar .chat-history-item .chat-title,
.sidebar .chat-history-item .chat-meta {
color: var(--sidebar-text) !important;
}
/* User name/email — scoped to .sidebar so non-sidebar usage inherits page theme */
.sidebar .user-name,
.sidebar-footer .user-name {
color: #e0e0e0 !important;
}
.sidebar .user-email,
.sidebar-footer .user-email {
color: rgba(255, 255, 255, 0.55) !important;
}
/* Chat history items outside sidebar still need readable text */
.chat-history-item .chat-title,
.chat-history-item .chat-meta {
color: var(--text-primary) !important;
}
/* ── Sidebar global dark guard — force dark bg in ALL themes ── */
/* This prevents any per-page light-theme body/container rules from
leaking a light background onto the sidebar. */
.sidebar,
#sidebar,
#shared-sidebar {
background: #060708 !important;
background-color: #060708 !important;
color: rgba(255, 255, 255, 0.88) !important;
border-right-color: rgba(255, 255, 255, 0.08) !important;
}
/* Light theme explicit override — belt + suspenders */
[data-theme="light"] .sidebar,
[data-theme="light"] #sidebar,
[data-theme="light"] #shared-sidebar {
background: #060708 !important;
background-color: #060708 !important;
color: rgba(255, 255, 255, 0.88) !important;
}
/* Propagate color to all direct children so nothing inherits page-body color */
.sidebar *,
#sidebar *,
#shared-sidebar * {
color: inherit;
}
/* Nav items explicit color so inherited color works correctly */
.sidebar .nav-item,
#sidebar .nav-item {
color: rgba(255, 255, 255, 0.88);
}
.sidebar .nav-item:hover,
#sidebar .nav-item:hover {
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
}
.sidebar .nav-section-title,
#sidebar .nav-section-title {
color: rgba(255, 255, 255, 0.60);
}
.sidebar .nav-section-title:hover,
#sidebar .nav-section-title:hover {
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.80);
}
/* ── Veto / alert banners: always high contrast ── */
[class*="veto-"][class*="hard"],
[class*="charter-block"],
[class*="hard-block"],
.alert-banner,
.degraded-mode-banner {
color: #ffffff !important;
}
[class*="soft-block"],
.warning-banner {
color: var(--text-primary, #e5e7eb) !important;
}
/* ── Ledger / governance tables ── */
.ledger-table td,
.ledger-table th,
[class*="claims-table"] td,
[class*="claims-table"] th,
.governance-table td,
.governance-table th {
color: var(--text-primary) !important;
}
/* ── Light theme: enforce dark text on formerly-white page surfaces ── */
/* NOTE: .chat-history-title intentionally excluded — sidebar stays dark regardless of theme */
[data-theme="light"] .user-name,
[data-theme="light"] .user-email {
color: #0e0f13 !important;
}
/* Chat history title — always light on dark sidebar background */
.sidebar .chat-history-item .chat-history-title,
#sidebar .chat-history-item .chat-history-title,
[data-theme="light"] .sidebar .chat-history-item .chat-history-title,
[data-theme="light"] #sidebar .chat-history-item .chat-history-title {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Chat history hover — full white on dark sidebar */
.sidebar .chat-history-item:hover .chat-history-title,
#sidebar .chat-history-item:hover .chat-history-title {
color: #ffffff !important;
}
/* Sidebar footer user info — always light text (dark bg) */
.sidebar-footer .user-name,
[data-theme="light"] .sidebar-footer .user-name {
color: #e0e0e0 !important;
}
.sidebar-footer .user-email,
[data-theme="light"] .sidebar-footer .user-email {
color: rgba(255, 255, 255, 0.55) !important;
}
[data-theme="light"] .ledger-table td,
[data-theme="light"] .ledger-table th,
[data-theme="light"] [class*="claims-table"] td,
[data-theme="light"] [class*="claims-table"] th,
[data-theme="light"] .governance-table td,
[data-theme="light"] .governance-table th {
color: #0e0f13 !important;
}
/* ============================================================
WCAG AA REMEDIATION GUARD (2026-06-05 contrast audit)
Global, token-driven overrides closing 54 measured failures.
Each rule is verified by scripts/check_contrast.py.
============================================================ */
/* ── Placeholders: solid color, NO opacity dimming (>=4.5:1) ──
Replaces every per-file ::placeholder that used opacity .5/.7 or a
non-text "disabled" token (gc-text-disabled, raw text-secondary). */
input::placeholder,
textarea::placeholder,
.app-input::placeholder,
.app-textarea::placeholder,
.eve-input::placeholder,
.chat-input::placeholder,
.gc-search__input::placeholder,
.settings-input::placeholder,
.card-input::placeholder,
.header-search-input::placeholder,
.voice-create-input::placeholder {
color: var(--placeholder-color, #8b93a7) !important;
opacity: 1 !important;
}
/* ── Disabled controls: readable, no opacity dimming ──
opacity:.45 dropped white labels to ~1.5–3.6:1. Use solid muted
fill + solid label (>=6:1). Filled variants get the grey fill;
outline/ghost variants keep their border + muted label. */
.btn:disabled,
.btn-primary:disabled,
.eve-btn-primary:disabled,
.eve-btn-secondary:disabled,
.app-btn:disabled,
button.eve-btn:disabled {
opacity: 1 !important;
cursor: not-allowed;
}
.btn-primary:disabled,
.eve-btn-primary:disabled,
.app-btn:disabled,
.app-btn-primary:disabled,
.app-btn-danger:disabled,
.app-btn-success:disabled {
background: var(--btn-disabled-bg) !important;
color: var(--btn-disabled-text) !important;
border-color: transparent !important;
}
.btn-outline:disabled,
.eve-btn-secondary:disabled,
.app-btn-secondary:disabled,
.app-btn-ghost:disabled {
background: transparent !important;
color: var(--btn-disabled-text) !important;
border-color: var(--border-primary) !important;
}
/* ── Critical system status TEXT (badges/labels) — 7:1 target ──
Status DOTS keep --accent-* fills (non-text, 3:1 exempt); only the
readable status label text is themed. Scoped to namespaced governance
classes to avoid colliding with light-bundle .status-* chips (those are
fixed at source in styles.css). */
.gc-status--allow, .badge-allow, .status-text--allow {
color: var(--status-allow-text) !important;
}
.gc-status--block, .badge-block, .status-text--block {
color: var(--danger-text, var(--status-block-text)) !important;
}
.gc-status--warn, .badge-warn, .status-text--warn {
color: var(--status-warn-text) !important;
}
/* Light-mode box headings: accent-as-text fails AA on light page bg */
[data-theme="light"] .box-status h3 { color: #0d5d2a !important; }
[data-theme="light"] .box-warning h3 { color: #7a4303 !important; }
[data-theme="light"] .box-alert h3 { color: #9e1b1b !important; }
/* ── White text on a raw --accent-primary fill fails AA (3.2:1).
Filled badges/pills/chips must use the auto-darkened strong token. */
.badge-primary, .chip-primary, .tag-primary, .pill-primary,
.btn-accent, [class*="badge"][class*="primary"] {
background: var(--accent-primary-strong) !important;
color: var(--text-on-accent) !important;
}
/* ============================================================
EVE CANONICAL BUTTON SYSTEM — eveneurosystems.com parity
Solid #2f6fd0 primary (NO gradients), 2px corners, IBM Plex Mono
UPPERCASE. Appended last so !important neutralises legacy gradient
fills, the linear-eve skin, page sheets, and inline
style="background:linear-gradient(...)" on every button family.
============================================================ */
/* Shape + typography — every button family, dark + light */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost,
.btn-danger, .btn-warning, .btn-success, .btn-green, .btn-go, .btn-cta,
.ds-btn, .ds-btn-primary, .ds-btn-outline, .ds-btn-secondary,
.eve-btn-primary, .eve-btn-secondary, .eve-btn-ghost,
.bl-btn, .bl-btn-primary, .bl-btn-secondary,
.app-btn, .app-btn-primary, .app-btn-danger, .app-btn-success,
.cta-button, a.cta-primary, .button-primary, button.primary {
border-radius:0!important;
font-family: 'IBM Plex Mono', 'Consolas', monospace !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
/* Square corners on bespoke/custom app buttons too (not circular icons) */
.il-btn, .il-btn-primary, .eve-fdp-cta, .action-btn-primary, .test-button,
.demo-btn, .install-btn, .retry-btn, .vs-test-btn, .period-btn, .refresh-btn,
.save-btn, .btn-run, .btn-approve, .btn-cancel, .btn-retry, .bl-preset-btn,
.new-chat-btn, .scroll-to-bottom-btn { border-radius:0!important; }
/* Primary — solid brand azure; kills gradient + inline fills */
.btn-primary, .ds-btn-primary, .eve-btn-primary, .bl-btn-primary,
.app-btn-primary, .cta-button, a.cta-primary, .button-primary,
.btn-go, button.primary {
background: #2f6fd0 !important;
background-image: none !important;
border: 1px solid #2f6fd0 !important;
color: #fff !important;
box-shadow: 0 6px 22px rgba(91,158,232,.28) !important;
font-weight: 600 !important;
}
.btn-primary:hover, .ds-btn-primary:hover, .eve-btn-primary:hover,
.bl-btn-primary:hover, .app-btn-primary:hover, .cta-button:hover,
a.cta-primary:hover, .button-primary:hover, .btn-go:hover,
button.primary:hover {
background: #2861c0 !important;
background-image: none !important;
border-color: #2861c0 !important;
color: #fff !important;
box-shadow: 0 10px 30px rgba(91,158,232,.42) !important;
transform: translateY(-2px);
}
.btn-primary:disabled, .ds-btn-primary:disabled, .eve-btn-primary:disabled,
.app-btn-primary:disabled, .btn-primary[disabled], .cta-button:disabled,
.btn-primary[aria-disabled="true"] {
background: var(--btn-disabled-bg, #2a3348) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
/* Light theme: primaries stay solid azure too (higher specificity than the
component light-mode overrides, e.g. [data-theme="light"] .bl-btn-primary). */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .ds-btn-primary,
html[data-theme="light"] .eve-btn-primary,
html[data-theme="light"] .bl-btn-primary,
html[data-theme="light"] .app-btn-primary,
html[data-theme="light"] .cta-button,
html[data-theme="light"] a.cta-primary,
html[data-theme="light"] .button-primary {
background: #2f6fd0 !important;
background-image: none !important;
border: 1px solid #2f6fd0 !important;
color: #fff !important;
}
/* Bespoke accent/action button classes from page-level inline