/* NavStak brand tokens + shared wordmark / mark
   Brand guide: Navigate. Stack. Dominate. */

:root {
  /* Core palette */
  --navy: #001f3f;
  --navy-mid: #0a3a66;
  --navy-soft: #4a90c2;
  --green: #00ff9f;
  --green-dim: #00c97e;
  --green-glow: rgba(0, 255, 159, 0.35);
  --charcoal: #2c3e50;
  --orange: #ff4d00;
  --orange-soft: #ff7a3d;

  /* Mapped UI aliases (Mission / boarding consume these) */
  --bg: #040a12;
  --bg-elev: #0a1520;
  --bg-panel: #0c1824;
  --line: #1a2d40;
  --line-soft: #132433;
  --text: #e8eef4;
  --muted: #8b9aab;
  --dim: #5c6b7a;
  --blue: #0a5cad;
  --blue-soft: #5eb0e8;
  --blue-deep: #001f3f;
  --green-ui: var(--green);
  --red: #ff4d4d;
  --amber: var(--orange);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Wordmark: Nav (navy-soft) + Stak (electric green + glow) */
.brand-wordmark,
.portal-name.brand-wordmark {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-style: normal;
}
.brand-wordmark .nav,
.portal-name .nav {
  color: var(--navy-soft);
  font-weight: 800;
}
.brand-wordmark .stak,
.portal-name .stak {
  color: var(--green);
  font-weight: 800;
  text-shadow: 0 0 12px var(--green-glow);
}
.brand-wordmark em,
.portal-name em {
  font-style: normal;
}

/*
 * Official logo (webui/static/logo-*.png)
 * True transparent PNG from NavStakLogo_Main (icon mark ≈ 1.32∶1).
 * Size by HEIGHT; width follows. Wordmark is CSS (.brand-wordmark) beside marks.
 */
.brand-mark,
.portal-mark.brand-mark {
  /* Default = topbar: 28px tall in 56px bar */
  height: 1.75rem;
  width: auto;
  aspect-ratio: 1.32 / 1;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  line-height: 0;
}
.brand-mark img,
.portal-mark.brand-mark img,
.brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Explicit size utilities (height-driven; aspect preserved) */
.brand-mark--xs { height: 1.125rem; width: auto; aspect-ratio: 1.32 / 1; } /* 18px — mock chrome */
.brand-mark--sm { height: 1.75rem;  width: auto; aspect-ratio: 1.32 / 1; } /* 28px — topbar */
.brand-mark--md { height: 2rem;     width: auto; aspect-ratio: 1.32 / 1; } /* 32px — mobile topbar */
.brand-mark--lg { height: 2.5rem;   width: auto; aspect-ratio: 1.32 / 1; } /* 40px */

/* Large mark for hero / marketing (icon only; page copy carries name) */
.brand-logo-full {
  display: block;
  width: auto;
  height: clamp(8.75rem, 26vw, 12.5rem); /* 140–200px */
  max-width: min(100%, 16.5rem);
  aspect-ratio: 1.32 / 1;
  object-fit: contain;
  object-position: center;
  margin: 0 0 0.5rem;
  border-radius: 0;
  background: transparent;
}
.brand-logo-full--center {
  margin-left: auto;
  margin-right: auto;
}
/* Footer mark */
.brand-logo-full--footer {
  height: 3.5rem; /* 56px */
  width: auto;
  max-width: 5rem;
  aspect-ratio: 1.32 / 1;
  margin: 0 0 0.45rem;
}

.portal-brand {
  gap: 0.45rem;
  align-items: center;
}
/* When full lockup is used, hide separate CSS wordmark */
.portal-brand--logo-only .brand-wordmark,
.portal-brand--logo-only .portal-name {
  display: none;
}

/* Primary CTA — navy with green energy */
.btn.primary {
  background: linear-gradient(180deg, #0a5cad, #001f3f);
  border-color: rgba(0, 255, 159, 0.45);
  color: #f0fdf8;
  box-shadow: 0 0 0 1px rgba(0, 255, 159, 0.08), 0 4px 14px rgba(0, 31, 63, 0.45);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #0d6fd4, #0a3a66);
  border-color: var(--green);
  color: #fff;
}
.btn.warn {
  border-color: rgba(255, 77, 0, 0.45);
  color: var(--orange-soft);
}
.btn.warn:hover {
  border-color: var(--orange);
  background: rgba(255, 77, 0, 0.1);
}

.brand-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-tagline strong {
  color: var(--green);
  font-weight: 700;
  text-shadow: 0 0 10px var(--green-glow);
}