/* Hayler: use orange for the brand and interaction, not business statuses. */
:root {
  --brand-orange: #ff6b00;
  --brand-orange-hover: #ed6200;
  --brand-orange-ink: #a64000;
  --brand-orange-soft: #fff1e6;
  --brand-orange-line: #f3c7a7;
  --brand-on-orange: #301a0b;
  --brand-shell: #222622;
}
/* Shared outlined H for the favicon, sidebar and sign-in. */
.app-brand-mark, .brand-mark, .brand-mark.small {
  padding: 0; flex: none; overflow: hidden; border-radius: 20%;
  background: var(--brand-orange);
}
.app-brand-mark img, .brand-mark img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.app-brand strong { font-size: 23px; letter-spacing: -.035em; }
.app-sidebar, .brand-panel { background: var(--brand-shell); }
.app-brand { color: #fff; }
.app-nav p { color: #a0aaa1; }
.app-nav a { color: #c3cbc5; }
.app-nav a > span { color: #96a198; }
.app-nav a:hover { background: #ffffff0c; color: #fff; }
.app-nav a.active {
  background: #ff6b001a; color: #ffe2cc;
  box-shadow: inset 3px 0 var(--brand-orange);
}
.app-nav a.active > span { color: #ffb57f; }
.sidebar-account > span { background: #394139; }
.sidebar-account small, .sidebar-status small { color: #a0ada3; }
.sidebar-account button[type=submit] { color: #bbc5bd; }
.brand-panel .eyebrow { color: #ffb77f; }
.brand-note, .secure-note { color: #c6cec7; }
.brand-panel:after {
  border-color: #ff6b0033;
  box-shadow: 0 0 0 90px #ff6b0007, 0 0 0 180px #ffffff04;
}
/* Dark text on vivid orange maintains readable action labels. */
.primary-action, .primary-button, .drawer-add, .price-upload,
.tm-hire-button, .tm-primary:not(.danger), .products-state button,
form:not(.sidebar-account) button[type=submit]:not(.danger) {
  background: var(--brand-orange); color: var(--brand-on-orange);
  border-color: var(--brand-orange); box-shadow: none;
}
.primary-action b { color: inherit; }
.primary-action:hover, .primary-button:hover, .drawer-add:hover, .price-upload:hover,
.tm-hire-button:hover, .tm-primary:not(.danger):hover, .products-state button:hover,
form:not(.sidebar-account) button[type=submit]:not(.danger):hover {
  background: var(--brand-orange-hover); border-color: var(--brand-orange-hover);
}
/* Small selection surfaces; neutral tables, charts and panels are preserved. */
.procurement-tabs button.active, .tm-tabs button.active,
.products-view-switch button.active {
  background: var(--brand-orange-soft); color: var(--brand-orange-ink); box-shadow: none;
}
.sales-subnav a.active { border-color: var(--brand-orange); color: var(--brand-orange-ink); }
.settings-nav button.active { background: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.settings-nav button.active > span, .settings-nav button.active > small { color: #934510; }
.chat-card.selected { background: #fffaf5; box-shadow: inset 3px 0 var(--brand-orange); }
.products-active-filters button, .finance-app .add-button {
  border-color: var(--brand-orange-line);
  background: var(--brand-orange-soft); color: var(--brand-orange-ink);
}
.finance-app .add-button:hover { background: #ffe2cc; border-color: var(--brand-orange); }
.module-symbol, .context-icon { background: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.surface header > a, .module-summary > a, .reconciliation-bar button,
.sources-grid button, .price-list-row button { color: var(--brand-orange-ink); }
/* Focus remains separate from the positive/negative data palette. */
*:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
body input:focus, body select:focus, body textarea:focus, .products-search:focus-within {
  border-color: var(--brand-orange); box-shadow: 0 0 0 3px #ff6b0020;
}
.tm-dept-card:focus-visible, .tm-person-row:focus-visible, .tm-tabs button:focus-visible {
  outline-color: var(--brand-orange);
}
@media (forced-colors: active) {
  .app-nav a.active { outline: 2px solid Highlight; }
}