/* nvsim dashboard — global styles Ported from `assets/NVsim Dashboard.zip` per ADR-092 §7.1. Per-component scoped styles live in each Lit element. */ :root { --bg-0: #07090d; --bg-1: #0d1117; --bg-2: #131a23; --bg-3: #1a232f; --line: #1f2a38; --line-2: #2a3848; --ink: #e6edf3; --ink-2: #b8c2cc; --ink-3: #7c8694; --ink-4: #4a5462; --accent: oklch(0.78 0.14 70); --accent-2: oklch(0.78 0.12 195); --accent-3: oklch(0.72 0.18 330); --accent-4: oklch(0.78 0.14 145); --warn: oklch(0.7 0.18 35); --ok: oklch(0.78 0.14 145); --bad: oklch(0.65 0.22 25); --grid: rgba(255, 255, 255, 0.04); --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4); --radius: 12px; --radius-sm: 8px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', system-ui, -apple-system, sans-serif; } [data-theme="light"] { --bg-0: #f4f5f7; --bg-1: #fbfbfc; --bg-2: #ffffff; --bg-3: #f0f2f5; --line: #d8dde3; --line-2: #c1c8d1; --ink: #0e131a; --ink-2: #2c3744; --ink-3: #54606e; /* AA on --bg-1 #fbfbfc — was #6b7684 (3.7:1), now ~5.4:1 */ --ink-4: #7a8390; /* improved from #9ba4b0 for incidental UI labels */ --grid: rgba(0, 0, 0, 0.05); --shadow: 0 12px 40px -16px rgba(15, 30, 55, 0.18), 0 2px 8px -2px rgba(15, 30, 55, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg-0); color: var(--ink); font-size: 14px; line-height: 1.45; overflow: hidden; height: 100vh; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } button { font-family: inherit; color: inherit; cursor: pointer; } input, select { font-family: inherit; color: inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes dash { to { stroke-dashoffset: -200; } } @keyframes float-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes diamond-spin { 0% { transform: rotateY(0) rotateX(8deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } } @keyframes spin { to { transform: rotate(360deg); } } body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; } /* Density (set via class on by setDensity()) */ body.density-comfy { font-size: 15px; } body.density-default { font-size: 14px; } body.density-compact { font-size: 13px; }