/* Colorful Signal tile with a black wordmark; page accents retain their viewport spectrum. */
:root {
  --brandmark-teal: #306a78;
  --brandmark-cyan: #249cd1;
  --brandmark-navy: #454378;
  --brandmark-violet: #7a4382;
  --brandmark-rose: #b85a68;
  --brandmark-orange: #ef8544;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.brand-logo-symbol {
  width: 28px;
  height: 28px;
  flex: none;
}

.brand-logo-wordmark {
  display: inline-block;
  vertical-align: middle;
  font-family: inherit;
  font-size: 26px;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .brand-logo-symbol { width: 24px; height: 24px; }
  .brand-logo-wordmark { font-size: 19px; }
}

@media (max-width: 359px) {
  .brand-logo-symbol { width: 20px; height: 20px; }
  .brand-logo-wordmark { font-size: 15px; }
}

.brand-button,
:is(a, button, [role='button'], input[type='submit']).bg-primary:not(.pricing-card-cta):not(.home-plan-cta) {
  background-color: var(--brand-teal);
  background-image: var(--brand-gradient-control);
  border-color: transparent;
  color: var(--primary-foreground);
}

/* Fixed backgrounds use viewport coordinates even in inline text and dialogs.
   No pointer, scroll, or animation loop is needed to synchronize the colors. */
:root :is(
  .brand-button,
  :is(a, button, [role='button'], input[type='submit']).bg-primary:not(.pricing-card-cta):not(.home-plan-cta),
  .signup-submit,
  .research-read,
  .sample-primary,
  .overview-primary,
  .overview-play,
  .plan-button--primary,
  .pricing-card[data-recommended='true'] .pricing-card-cta,
  .home-plan[data-recommended='true'] .home-plan-cta
) {
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* Filters and transforms create a new origin for fixed backgrounds.
     Keep the paint surface still; icons can retain their own hover motion. */
  filter: none;
  transform: none;
  /* Do not add translate/scale resets: Lightning CSS combines them into an
     identity transform, which still changes fixed-background coordinates. */
  @media (hover: hover) {
    &:where(:not(:disabled):hover) {
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%), 0 3px 10px rgb(25 90 105 / 12%);
    }
  }
}

/* Skip solid status badges and SVGs: their colors encode state or model output. */
@supports (background-clip: text) {
  .brand-text,
  .text-primary:where(:not(svg):not([class*='bg-']):not([role='status'])) {
    background-image: var(--brand-gradient-ink);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

@media (forced-colors: active) {
  .brand-logo-wordmark { color: CanvasText; }
  .brand-button,
  :is(a, button, [role='button'], input[type='submit']).bg-primary:not(.pricing-card-cta):not(.home-plan-cta) {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
    filter: none;
  }
  .brand-text,
  .text-primary:where(:not(svg):not([class*='bg-']):not([role='status'])) {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}