/*
* 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=1');
/* Enterprise component-state + interaction layer (loading/empty/error/success/disabled, focus, secure-UI) */
@import url('/css/enterprise-states.css?v=1');
/* 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-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;
--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 {
color: #7a8299 !important;
}
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .theme-footer a:hover {
color: #c8cdd8 !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;
opacity: 0.6;
}
/* ── 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: #5b9ee8; color: #fff; border-color: #5b9ee8; --btn-eq-ink: #fff; box-shadow: 0 6px 22px rgba(91,158,232,.28); }
.btn-primary:hover { background: #6fb0f2; border-color: #6fb0f2; 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(--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) */
--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(--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 #5b9ee8 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: #5b9ee8 !important;
background-image: none !important;
border: 1px solid #5b9ee8 !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: #6fb0f2 !important;
background-image: none !important;
border-color: #6fb0f2 !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: #5b9ee8 !important;
background-image: none !important;
border: 1px solid #5b9ee8 !important;
color: #fff !important;
}
/* Bespoke accent/action button classes from page-level inline