/* Brand typography layer, loaded last on every app page.
   One green everywhere: the logo green. Card and chart titles share the
   "Günlük Tonaj" eyebrow look; page titles stay large but turn green.
   English halves of bilingual titles are plain gray italic.
   The !important flags are deliberate: older page sheets set heading
   sizes and colors with many competing selectors. */
:root,
:root[data-theme="dark"] {
  --brand-color: #318e8c;
  --brand-green: #318e8c;
}

/* Page titles */
main.container :is(h1, .page-heading h1, .shipment-title) {
  color: var(--brand-green) !important;
  letter-spacing: -.02em;
}

/* Card, panel and chart titles: same as the "Günlük Tonaj" eyebrow */
main.container :is(h2, h3):not(.sales-accessible-heading):not(.visually-hidden):not(.sr-only):not(:is(dialog, [role="dialog"], [class*="dialog"], [class*="modal"]) *),
main.container .eyebrow {
  color: var(--brand-green) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* English halves */
.bilingual-en {
  color: #7b8a96 !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
main.container :is(h2, h3) .bilingual-en,
main.container .eyebrow .bilingual-en {
  margin-left: 6px;
  font-size: 11px !important;
}
main.container h1 .bilingual-en {
  margin-left: 8px;
  font-size: .6em;
}
:root[data-theme="dark"] .bilingual-en {
  color: #8a99a7 !important;
}

/* Bars and other single-color chart marks */
.tonnage-bar:not(.mismatch) {
  fill: var(--brand-green) !important;
}
.tonnage-bar:not(.mismatch):hover {
  fill: #3da5a2 !important;
}