/* Shared brand tokens inherited by the existing applications. */
body.has-itft-shell {
  --navy: #102a43;
  --dark: #081f33;
  --blue: #0f766e;
  --teal: #0f766e;
  --gold: #f2b84b;
  --ink: #172b3a;
  --muted: #5e7180;
  --line: #d9e3e8;
  --bg: #f4f8f9;
  --soft: #edf6f5;
}

body.has-itft-shell :where(.primary, button[type="submit"]):not(.remove):not(.close) {
  color: #fff;
  background-color: var(--itft-brand-teal);
}

body.has-itft-shell :where(.logo, .mark, .brand-mark, .tool-number, .icon) {
  background-color: var(--itft-brand-teal);
  background-image: linear-gradient(145deg, var(--itft-brand-navy), var(--itft-brand-teal));
}

body.has-itft-shell .app-header {
  background: linear-gradient(115deg, var(--itft-brand-navy-deep), var(--itft-brand-navy));
}

body.has-itft-shell .site-header {
  top: 68px;
  border-bottom-color: var(--itft-brand-border);
}

body.has-itft-shell :where(.card, .tool-card, .panel, .form-card) {
  border-color: var(--itft-brand-border);
}

body.has-itft-shell :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.3);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  body.has-itft-shell .site-header {
    top: 62px;
  }
}

@media (max-width: 640px) {
  body.has-itft-shell .site-header {
    top: 109px;
  }
}

@media print {
  body.has-itft-shell .site-header,
  body.has-itft-shell .app-header {
    position: static;
  }
}