@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

:root {
  --brand-navy: #1E3557;
  --brand-copper: #B9753A;
  --brand-steel: #555555;
  --ink: #1E3557;
  --navy: #1E3557;
  --navy2: #29486f;
  --slate: #1E3557;
  --gold: #B9753A;
  --bronze: #B9753A;
  --orange: #B9753A;
  --accent: #B9753A;
  --tan: #B9753A;
  --muted: #555555;
}

html, body, button, input, select, textarea {
  font-family: "Montserrat", Arial, sans-serif !important;
}

body { color: var(--brand-steel); }

h1, h2, h3, h4, h5, h6,
.hero-title, .page-title, .section-title, .card-title, .brand-title,
.site-brand b, .card strong, .sub-card strong,
.sub-brand b, .admin-brand b, .safety-head .brand b,
.history-brand strong, .delivery-head strong, .scanner-app .brand strong {
  color: var(--brand-navy);
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 700 !important;
}

p, label, input, select, textarea, td, dd,
.supporting-text, .description, .subtitle { font-weight: 400; }

a { text-decoration-color: var(--brand-copper); }

button, .button, .primary-button, .sign-in-button, [class*="primary-button"] {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 700;
}

.primary-button, .sign-in-button, button[type="submit"] {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
}

.primary-button:hover, .sign-in-button:hover, button[type="submit"]:hover {
  background-color: var(--brand-copper);
  border-color: var(--brand-copper);
}

.kicker, .eyebrow, .hero small, .sub-hero small,
.card small, .sub-card small, .open {
  color: var(--brand-copper) !important;
  font-weight: 700;
}

.site-header, .admin-top, .sub-head, .safety-head, .bottom-nav,
.scanner-app > header, .delivery-head {
  background-color: var(--brand-navy) !important;
}

.site-header .site-brand, .site-header .site-brand b, .site-header nav a,
.admin-top .admin-brand b, .sub-head .sub-brand b,
.safety-head .brand b, .bottom-nav, .bottom-nav a, .bottom-nav button,
.scanner-app > header, .scanner-app > header .brand strong,
.delivery-head, .delivery-head strong { color: #FFFFFF !important; }

.admin-top a, .admin-top button, .sub-head a, .sub-head button,
.safety-head a, .safety-head button { border-color: var(--brand-copper) !important; }

.employee-login { background: var(--brand-copper) !important; }

.site-header { border-bottom-color: var(--brand-copper) !important; }

.brand img, .sub-brand img, .admin-brand img, .history-brand img,
.delivery-head img, .login-mark img, .account-card > img { object-fit: contain; }

::selection { background: var(--brand-copper); color: #FFFFFF; }

:focus-visible {
  outline: 3px solid var(--brand-copper);
  outline-offset: 2px;
}

/* Three-dimensional brand lettering on dark navy surfaces. */
.login-brand h1,
.sub-card strong,
.safety-shell .card strong {
  color: var(--brand-navy) !important;
  -webkit-text-stroke: 1px var(--brand-copper);
  paint-order: stroke fill;
  text-shadow:
    1px 1px 0 var(--brand-copper),
    2px 2px 0 var(--brand-copper),
    3px 3px 0 #8A5127,
    5px 7px 10px rgba(7, 20, 37, 0.5);
}

.login-brand h1 {
  -webkit-text-stroke-width: 1.5px;
  text-shadow:
    1px 1px 0 var(--brand-copper),
    2px 2px 0 var(--brand-copper),
    3px 3px 0 var(--brand-copper),
    4px 4px 0 #8A5127,
    7px 9px 14px rgba(7, 20, 37, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .login-brand h1,
  .sub-card strong,
  .safety-shell .card strong {
    text-shadow: 1px 1px 0 var(--brand-copper), 2px 2px 0 #8A5127;
  }
}