/* Approved LambethAI gunmetal palette — presentation only. */
:root {
  color-scheme: dark;
  --bg: #363f48;
  --surface: #2e3740;
  --surface-2: #39444f;
  --surface-3: #424e5a;
  --panel: #2e3740;
  --panel-2: #39444f;
  --line: #56636f;
  --line-strong: #82909d;
  --border: #56636f;
  --text: #f4f6f8;
  --muted: #b8c2cc;
  --muted-2: #b8c2cc;
  --orange: #179fe5;
  --orange-2: #73caff;
  --orange-dim: rgba(23, 159, 229, .16);
  --blue: #4b8cff;
  --blue-2: #73caff;
  --blue-dim: rgba(23, 159, 229, .16);
  --accent: #73caff;
}
html, body { background: var(--bg); color: var(--text); }
.login-brand {
  background: radial-gradient(circle at 25% 40%, rgba(23,159,229,.12), transparent 48%),
              linear-gradient(145deg, #424e59, #363f48);
}
.login-panel { background: #2e3740; border-color: var(--line); }
.sidebar, .app-header { background: #252c33; border-color: var(--line); }
.topbar { background: rgba(46,55,64,.96); border-color: var(--line); }
.workspace-tag { background: #39444f; border-color: var(--line); color: var(--muted); }
.nav-section, .nav-link, .login-footer, .login-panel footer, .app-footer,
.camera-meta small, .table-actions button, .modal-close { color: var(--muted); }
.nav-link:hover { background: #39444f; color: var(--text); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(23,159,229,.22), rgba(23,159,229,.07));
  color: var(--text);
}
.metric-card, .panel, .camera-card {
  background: linear-gradient(155deg, #39444f, #2e3740);
  border-color: var(--line);
}
.table-panel { background: transparent; }
.modal, .modal-card { background-color: #2e3740; border-color: var(--line); }
.modal-header, .modal-footer { background: #2e3740; border-color: var(--line); }
/* View uses .modal for its overlay, rather than the dialog itself. */
.view-app ~ .modal, body > .modal:has(.modal-card) { background: rgba(15,20,26,.82); }
.login-card label, .talkdown-field, .talkdown-confirm { color: var(--text); }
.login-card input, .field input, .field select, .field textarea,
.toolbar input, .toolbar select, select {
  background: #252c33; color: var(--text); border-color: var(--line-strong);
}
input::placeholder, textarea::placeholder { color: #a8b3bf; opacity: 1; }
select option { background: #252c33; color: var(--text); }
.button, .icon-button { background-color: var(--surface-3); color: var(--text); }
/* Dark lettering keeps the brighter blue button readable. */
.button.primary {
  background: #179fe5; border-color: #179fe5; color: #14202a;
}
.button.primary:hover { background: #73caff; border-color: #73caff; }
.button.primary:disabled { background: #179fe5; border-color: #179fe5; }
.button.quiet { background: #39444f; }
.button.ghost { background: transparent; }
.button.danger { background: var(--red-dim, rgba(239,77,88,.12)); color: #ffb0b7; }
.button.success { background: var(--green-dim, rgba(55,201,130,.12)); color: #91f0bb; }
:focus-visible { outline: 2px solid #73caff; outline-offset: 3px; }

.eyebrow, .section-kicker, .crumb { color: #73caff; }