/* BRAND-1: isolated Grupo Garden visual tokens for Chatwoot 4.16.2. */
:root {
  --blue-8: 218 42 59;
  --blue-9: 200 11 28;
  --blue-10: 174 9 24;
  --blue-11: 155 8 21;
  --blue-12: 84 5 13;
  --border-blue: 200, 11, 28, 0.5;
  --border-blue-strong: 174 9 24;
  --solid-blue: 255 226 230;
  --solid-blue-2: 255 250 251;
  --text-blue: 84 5 13;
}

.dark {
  --blue-8: 232 69 84;
  --blue-9: 200 11 28;
  --blue-10: 218 42 59;
  --blue-11: 255 145 155;
  --blue-12: 255 222 225;
  --border-blue: 232, 69, 84, 0.55;
  --border-blue-strong: 255 145 155;
  --solid-blue: 79 16 25;
  --solid-blue-2: 37 20 23;
  --text-blue: 255 222 225;
}

/* Login, password reset, email verification, and SSO screens share this shell. */
#app > main.min-h-screen {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.84), rgb(255 255 255 / 0.9)),
    url('/brand-assets/login-background.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.dark #app > main.min-h-screen {
  background-image:
    linear-gradient(rgb(17 17 19 / 0.86), rgb(17 17 19 / 0.92)),
    url('/brand-assets/login-background.webp');
}

#app > main.min-h-screen section:first-of-type img,
body > div > main.min-h-screen section:first-of-type img {
  width: 220px;
  height: auto;
  max-width: min(220px, 82vw);
  max-height: 72px;
  object-fit: contain;
}

/* Administrate/Super Admin uses the legacy woot palette. */
.bg-woot-500 { background-color: #c80b1c !important; }
.hover\:bg-woot-600:hover { background-color: #ae0918 !important; }
.focus\:ring-woot-500:focus,
.dark\:focus\:ring-woot-500:focus { --tw-ring-color: #c80b1c !important; }
.focus-visible\:outline-woot-500:focus-visible { outline-color: #c80b1c !important; }

@media (max-width: 640px) {
  #app > main.min-h-screen {
    padding: 3rem 1rem;
  }

  #app > main.min-h-screen section:first-of-type img,
  body > div > main.min-h-screen section:first-of-type img {
    width: 180px;
    height: auto;
    max-width: min(180px, 82vw);
    max-height: 72px;
  }
}