:root {
  --ink: #191c36;
  --ink-2: #292d4b;
  --green: #557d19;
  --mint: #a8d433;
  --mint-pale: #f0f6dc;
  --cream: #fff;
  --paper: #fff;
  --white: #fff;
  --text: #2b3349;
  --muted: #68758a;
  --line: #dfe4ed;
  --shadow: 0 18px 50px rgba(25, 28, 54, .10);
  --shadow-sm: 0 8px 24px rgba(25, 28, 54, .08);
}

body { color: var(--text); background: #fff; }
.topbar { background: #fff; border-bottom-color: var(--line); }
.company-browser { background: #fafbfe; }
.brand img,
.login-mobile-brand img {
  object-fit: cover;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 5px 16px rgba(25, 28, 54, .18);
}
.brand-light img { box-shadow: none; }
.login-brand-panel {
  background: linear-gradient(145deg, #191c36 0%, #232844 100%);
}
.brand-pattern { border-color: rgba(168, 212, 51, .15); }
.eyebrow-light, .login-message h1 em { color: #b9dc57; }
.security-icon { color: #b9dc57; background: rgba(168, 212, 51, .13); }
.security-note { border-color: rgba(255, 255, 255, .16); }

.nav-item:hover { color: var(--ink); background: #f4f6ec; }
.nav-item.active { color: var(--ink); background: var(--mint-pale); }
.nav-item.active::before { background: var(--green); }
.nav-item.active svg { color: var(--green); }
.topbar-kicker, .eyebrow, .file-tabs button.active { color: var(--green); }
.file-tabs button.active { border-bottom-color: var(--mint); }
.workspace-company:hover { background: #f5f7ef; }
.workspace-company.selected { background: var(--mint-pale); }
.workspace-company.selected::before { background: var(--mint); }
.workspace-company.selected .workspace-company-avatar { color: var(--ink); background: #e2efb8; }
.workspace-document:hover { background: #f8faef; }
.workspace-document.selected { background: var(--mint-pale); }
.view-switch button.active { color: var(--ink); background: #eaf2ce; }
.button-primary { color: #fff; background: var(--ink); }
.button-primary:hover { background: var(--ink-2); }
.button-outline:hover { border-color: var(--mint); }
.button-ghost { color: var(--ink); background: #f0f3e7; }
.workspace-search:focus-within,
.input-wrap input:focus,
.field > input:focus,
.field > select:focus,
.field > textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(85, 125, 25, .12); }
:focus-visible { outline-color: var(--green); }

@media (max-width: 650px) {
  .brand img, .login-mobile-brand img { border-radius: 8px; }
}