:root {
  --surface-submit: #c73a4d !important;
  --surface-submit-hover: #a92f40 !important;
  --surface-active: #f9dce1 !important;
  --surface-active-alt: #fef4f6 !important;
  --ring: 351 54% 50% !important;
  --ring-primary: 199 58 77 !important;
}

::selection {
  background: #f9dce1;
  color: #17191d;
}

button[data-testid="login-button"] {
  box-shadow: 0 10px 28px rgb(199 58 77 / 22%);
}

button[data-testid="login-button"]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: #c73a4d !important;
  --tw-ring-color: rgb(199 58 77 / 35%) !important;
}

img[alt="Solune AI 标识"] {
  max-width: min(280px, 76vw);
}

@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(circle at 50% -15%, rgb(249 220 225 / 58%), transparent 36%),
      #f7f8fa;
  }

  #root > div {
    background: transparent !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-active: #49343c !important;
    --surface-active-alt: #30252a !important;
  }
}

@media (max-width: 640px) {
  img[alt="Solune AI 标识"] {
    max-width: min(240px, 72vw);
  }

  button[data-testid="login-button"] {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}