/* ExecuMedical parent-brand alignment for EMERGE Practice OS.
   Canonical identity originates in EMx-tech/execumedical-site (Concept 02).
   This layer intentionally does not replace EMERGE's Calm Control Room design system; it only
   aligns the product shell with the approved parent mark, lockup and core brand palette. */
:root {
  --brand-navy: #0B2D4B;
  --brand-navy-2: #123C5B;
  --brand-teal: #0E9F9A;
  --brand-teal-dark: #087F7B;
  --brand-slate: #64748B;

  /* Parent-brand anchors applied to EMERGE's existing semantic system. */
  --color-text-strong: var(--brand-navy);
  --color-action: var(--brand-teal);
  --color-action-hover: var(--brand-teal-dark);
  --color-link: var(--brand-teal-dark);
  --color-nav-bg: var(--brand-navy);
  --color-nav-active-bg: var(--brand-navy-2);
  --color-nav-accent: var(--brand-teal);
}

/* Product-family lockup: canonical EM monogram + letterspaced EMERGE, with Practice OS beneath. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: normal;
  line-height: 1;
}

.brand .brand-mark {
  display: block;
  width: 46px;
  height: auto;
  flex: 0 0 auto;
}

.brand .brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand .brand-name {
  display: block;
  color: var(--brand-navy);
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .16em;
}

.brand .brand-product {
  display: block;
  margin-top: 5px;
  color: var(--brand-slate);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.brand--inverse .brand-name { color: #fff; }
.brand--inverse .brand-product { color: var(--navy-200); }

/* Override the legacy auth-card text-only brand selectors with the family lockup. */
.auth-card .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-navy);
  letter-spacing: normal;
  margin-bottom: 4px;
}
.auth-card .brand .brand-mark { width: 54px; }
.auth-card .brand .brand-copy { display: flex; flex-direction: column; }
.auth-card .brand .brand-name {
  display: block;
  color: var(--brand-navy);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: .16em;
  line-height: 1;
}
.auth-card .brand .brand-product {
  display: block;
  margin-top: 5px;
  color: var(--brand-slate);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 900px) {
  .brand .brand-mark { width: 40px; }
  .brand .brand-name { font-size: 18px; }
}