/*
* 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=nb1107');
/* Enterprise component-state + interaction layer (loading/empty/error/success/disabled, focus, secure-UI) */
@import url('/css/enterprise-states.css?v=nb1107');
/* 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: #0e0f13;
--bg-tertiary: #15171c;
--bg-card: rgba(17, 24, 39, 0.8);
--bg-header: rgba(11, 15, 23, 0.95);
/* Borders */
--border-primary: #212329;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.06);
/* 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: #e5e7eb;
--text-secondary: #9ca3af;
--text-heading: #e5e7eb;
--text-muted: #9ca3af;
--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 */
--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.04);
--text-on-0: #e5e7eb;
--text-muted-on-0: #9ca3af;
/* Surface 1 — cards / panels */
--surface-1: #0e0f13;
--surface-1-border: rgba(255, 255, 255, 0.07);
--text-on-1: #e5e7eb;
--text-muted-on-1: #9ca3af;
/* Surface 2 — raised panels */
--surface-2: #15171c;
--surface-2-border: rgba(255, 255, 255, 0.09);
--text-on-2: #d4d9e4;
--text-muted-on-2: #8a91a8;
/* Surface 3 — modals / sheets */
--surface-3: #181a20;
--surface-3-border: rgba(255, 255, 255, 0.11);
--text-on-3: #e2e6ef;
--text-muted-on-3: #9299b0;
/* Surface 4 — dropdowns / tooltips */
--surface-4: #1d1f26;
--surface-4-border: rgba(255, 255, 255, 0.13);
--text-on-4: #e2e6ef;
--text-muted-on-4: #9299b0;
/* 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.88);
--sidebar-text-muted: rgba(255, 255, 255, 0.60);
--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.60);
--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: #0e0f13;
--bg-tertiary: #15171c;
--bg-card: rgba(17, 24, 39, 0.8);
--bg-header: rgba(11, 15, 23, 0.95);
--border-primary: #212329;
--border-hover: #2a3a5a;
--border-subtle: rgba(255, 255, 255, 0.06);
--accent-primary: #4a90e2;
--accent-secondary: #c8a84e;
--accent-safe: #22c55e;
--accent-alert: #ef4444;
--accent-warning: #fbbf24;
--accent-governance: #818cf8;
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-heading: #e5e7eb;
--text-muted: #9ca3af;
--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.04); --text-on-0: #e5e7eb; --text-muted-on-0: #9ca3af;
--surface-1: #0e0f13; --surface-1-border: rgba(255,255,255,0.07); --text-on-1: #e5e7eb; --text-muted-on-1: #9ca3af;
--surface-2: #161b35; --surface-2-border: rgba(255,255,255,0.09); --text-on-2: #d4d9e4; --text-muted-on-2: #8a91a8;
--surface-3: #181a20; --surface-3-border: rgba(255,255,255,0.11); --text-on-3: #e2e6ef; --text-muted-on-3: #9299b0;
--surface-4: #1d1f26; --surface-4-border: rgba(255,255,255,0.13); --text-on-4: #e2e6ef; --text-muted-on-4: #9299b0;
--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.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);
}
/* ── 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 ───────────────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.btn-primary {
background: var(--accent-primary-strong);
color: var(--text-on-accent);
}
.btn-primary:hover {
background: var(--accent-primary-strong);
filter: brightness(1.12);
color: var(--text-on-accent);
}
.btn-outline {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.btn-outline:hover {
border-color: var(--border-hover);
color: var(--text-heading);
}
/* ── 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: #f3f5f7; /* CANVAS — one step below cards */
--bg-secondary: #eceff3; /* raised panel / dropdown body */
--bg-tertiary: #e3e8ef; /* deepest inset (rails, wells) */
--bg-card: #ffffff; /* CARD — SOLID white (was rgba .9 → washed out) */
--bg-hover: rgba(15, 23, 42, 0.04);
--bg-header: rgba(10, 14, 26, 0.97); /* header always dark, even in light mode */
--border-primary: #d7dee7; /* PRIMARY border — visible containment */
--border-hover: #b7c0cc; /* hover border — clearly stronger than rest */
--border-subtle: #e5eaf0; /* SECONDARY border / dividers */
--accent-primary: #2563eb;
--accent-secondary: #3a7bd0;
--accent-safe: #16a34a;
--accent-alert: #dc2626;
--accent-warning: #d97706;
--accent-governance: #4f46e5;
--text-primary: #1f2937; /* body — 13.0:1 on canvas (was #374151, soft) */
--text-secondary: #4b5563; /* secondary — 6.9:1 on canvas */
--text-heading: #111827; /* headings / KPI — 16.1:1 on canvas */
--text-muted: #5f6675; /* muted — AA on canvas (5.3:1) AND cards (5.8:1) */
--text-on-accent: #ffffff;
--placeholder-color: #5b6472; /* 5.33:1 on light surfaces */
--btn-disabled-bg: #cbd5e1; --btn-disabled-text: #3f4655;
--status-allow-text: #0d5d2a; --status-block-text: #9e1b1b; --status-warn-text: #7a4303; /* critical 7:1 on light */
/* Card elevation (light only) — restrained enterprise depth */
--elevation-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.03);
--elevation-card-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 8px 20px rgba(16, 24, 40, 0.06);
--elevation-popover: 0 8px 24px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.06);
/* Surface tokens — light theme flips (canvas → card → raised, paired text) */
--surface-0: #f3f5f7; --surface-0-border: #d7dee7; --text-on-0: #1f2937; --text-muted-on-0: #5f6675;
--surface-1: #ffffff; --surface-1-border: #d7dee7; --text-on-1: #111827; --text-muted-on-1: #6b7280;
--surface-2: #f7f9fc; --surface-2-border: #e5eaf0; --text-on-2: #1f2937; --text-muted-on-2: #5b6472;
--surface-3: #ffffff; --surface-3-border: #d7dee7; --text-on-3: #111827; --text-muted-on-3: #6b7280;
--surface-4: #ffffff; --surface-4-border: #d7dee7; --text-on-4: #111827; --text-muted-on-4: #6b7280;
--hover-overlay: rgba(15,23,42,0.04); --active-overlay: rgba(15,23,42,0.07); --focus-ring: rgba(37,99,235,0.45);
/* 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;
}