/* AirbrnVR brand (style guide v2.0) for the admin, dashboard and account pages.
   Colors come from UNFOLD["COLORS"] in settings. Unfold already ships Inter
   (body and interface); this adds Sora for headings. */

@font-face {
  font-family: "Sora";
  src: url("../brand/fonts/Sora-variable.14adf29964c4.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* The full logo (1768 x 463 artwork, padding included) must show at least
   200px wide. In headers: 56px high is 214px wide. */
.brand-logo {
  height: 56px;
  max-width: none;
}

/* The A symbol (padding included) must show at least 32px high: 44px
   high shows about 36px. */
.brand-symbol {
  height: 44px;
  max-width: none;
}

/* Centered on the sign-in and sign-up pages: 72px high is 275px wide, with
   quarter-height clear space below. */
.brand-lockup {
  height: 72px;
  max-width: none;
}

/* Signed-out account pages (sign in, sign up, password reset): the form's
   buttons span its full width. Signed-in account pages keep inline buttons. */
body.login .auth-actions > * {
  flex: 1 1 100%;
}
/* The reCAPTCHA widget is a fixed 304px box; center it in the form. */
body.login .g-recaptcha {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Sora 600 for section titles, 700 for display headings. */
h1,
h2,
h3,
.brand-heading {
  font-family: "Sora", var(--font-sans), sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Card title bars (admin, dashboard): a teal tint with a teal accent line on
   cloud, a cyan tint with a cyan accent on navy (style guide v2.0 colors).
   Solid colors only: the logo gradient belongs only in the A. The class is
   added by templates/unfold/components/card.html and, for dashboard
   widgets, templates/stats/widgets.html. */
.card-titlebar {
  background-color: rgb(8 127 140 / 0.1);
  border-bottom-color: rgb(8 127 140 / 0.22);
  box-shadow: inset 0 3px 0 #087f8c;
}
.card-titlebar,
.card-titlebar h2 {
  color: #102431;
}
.dark .card-titlebar {
  background-color: rgb(0 221 224 / 0.09);
  border-bottom-color: rgb(0 221 224 / 0.18);
  box-shadow: inset 0 3px 0 #00dde0;
}
.dark .card-titlebar,
.dark .card-titlebar h2 {
  color: #f7fafc;
}