body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--density-text); background-image: var(--body-bg-image); background-attachment: var(--body-bg-attachment); }
.surface { background: var(--surface); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.surface-2 { background: var(--surface-2); }
.border-app { border-color: var(--border); }
.border-strong { border-color: var(--border-strong); }
.accent-bg { background: var(--accent); color: var(--accent-fg); }
.accent-fg { color: var(--accent); }
.accent-soft { background: var(--accent-soft); }
.fg-muted { color: var(--fg-muted); }
.fg-subtle { color: var(--fg-subtle); }
.rounded-app { border-radius: var(--radius); }
.rounded-app-lg { border-radius: var(--radius-lg); }
.rounded-app-sm { border-radius: var(--radius-sm); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.pad { padding: var(--density-pad-y) var(--density-pad-x); }

.app-sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); width: var(--sidebar-width); }
.app-sidebar .nav-item { color: var(--sidebar-fg); border-radius: var(--radius); padding: var(--density-pad-y) 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: var(--density-text); }
.app-sidebar .nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-fg-strong); }
.app-sidebar .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); font-weight: 600; }
.app-sidebar .brand-title { color: var(--sidebar-fg-strong); }

.badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }

.btn { padding: calc(var(--density-pad-y) - 1px) 0.75rem; border-radius: var(--radius); font-weight: 600; font-size: var(--density-text); display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--border); }