html:root {
  --brand-950: #1d3e46 !important;
  --brand-900: #204b55 !important;
  --brand-800: #245b67 !important;
  --brand-700: #2a6f7d !important;
  --brand-600: #318393 !important;
  --brand-500: #4097a8 !important;
  --ion-color-primary-rgb: 36, 91, 103 !important;
}

.auth-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--brand-50) 78%, var(--white));
  /* Return to the softer circular-cell look, but layer several independent
   * repeats with different periods and offsets so no regular grid emerges. */
  background-image:
    radial-gradient(
      circle,
      transparent 0 16px,
      color-mix(in srgb, var(--brand-300) 14%, transparent) 16.5px 17.5px,
      transparent 18px
    ),
    radial-gradient(
      circle,
      transparent 0 10px,
      color-mix(in srgb, var(--brand-400) 8%, transparent) 10.5px 11.5px,
      transparent 12px
    ),
    radial-gradient(
      circle,
      transparent 0 22px,
      color-mix(in srgb, var(--brand-300) 8%, transparent) 22.5px 23.5px,
      transparent 24px
    ),
    radial-gradient(
      circle,
      transparent 0 7px,
      color-mix(in srgb, var(--brand-400) 6%, transparent) 7.5px 8.5px,
      transparent 9px
    );
  background-size:
    78px 72px,
    113px 101px,
    167px 149px,
    61px 83px;
  background-position:
    6px 9px,
    47px 31px,
    92px 58px,
    23px 67px;
}

.auth-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 20%, color-mix(in srgb, var(--white) 56%, transparent), transparent 43%),
    radial-gradient(ellipse at 76% 74%, color-mix(in srgb, var(--brand-100) 24%, transparent), transparent 49%),
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--white) 22%, transparent),
      transparent 38% 70%,
      color-mix(in srgb, var(--brand-100) 16%, transparent)
    );
}

@media (max-width: 759px) {
  .auth-brand {
    background-size:
      72px 66px,
      103px 93px,
      151px 137px,
      57px 77px;
  }
}

@media (forced-colors: active) {
  .auth-brand {
    background: Canvas;
  }

  .auth-brand::after {
    display: none;
  }
}