:root {
  --cne-brand-blue: #063b68;
  --cne-brand-deep: #062f56;
  --cne-brand-mid: #087faf;
  --cne-brand-turquoise: #00b7b5;
  --cne-brand-aqua: #12d6c5;
  --cne-brand-white: #ffffff;
  --cne-brand-gradient: linear-gradient(135deg, var(--cne-brand-blue), var(--cne-brand-mid));
}

.cne-logo {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 639;
}

.cne-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1600 / 639;
  object-fit: contain;
}

.cne-logo .cne-logo-dark {
  display: none;
}

html[data-theme="dark"] .cne-logo .cne-logo-light {
  display: none;
}

html[data-theme="dark"] .cne-logo .cne-logo-dark {
  display: block;
}

/* Login can select its theme independently of the shared shell. */
html[data-login-theme="light"] .cne-logo .cne-logo-light,
html[data-login-theme="dark"] .cne-logo .cne-logo-dark {
  display: block;
}

html[data-login-theme="light"] .cne-logo .cne-logo-dark,
html[data-login-theme="dark"] .cne-logo .cne-logo-light {
  display: none;
}