@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-300: #8b93e9;
  --primary-400: #616ddb;
  --primary-500: #4352d1;
  --primary-600: #3240b7;
  --primary-700: #253193;
  --primary-800: #202973;
  --primary-900: #1e2453;
  --dark-primary-300: #ccd9e8;
  --dark-primary-400: #9facc7;
  --dark-primary-500: #777e94;
  --dark-primary-600: #4d566f;
  --dark-primary-700: #323c58;
  --dark-primary-800: #2b344e;
  --dark-primary-900: #232942;
  --dark-accent-200: #b3bcde;
  --light-gradient-from: #8b93e9;
  --light-gradient-to: #040035;
  --dark-gradient-from: #3240b7;
  --dark-gradient-to: #1e2453;
}

body {
  @apply w-full h-screen flex bg-gradient-to-br from-[#B4F3F1] to-[#FFE8FF] text-[rgb(8,10,10)];

  /* background-image: linear-gradient(to bottom, var(--primary-700) 0%, var(--primary-800) 100%); */
}

form {
  @apply w-full;
}

.logo {
  @apply mx-auto h-8 w-auto;
}

h2 {
  @apply text-2xl p-6;
}

a,
[type="submit"].link {
  @apply text-rb-teal-200 hover:text-rb-teal-200;
}

.auth.auth button,
.auth.auth [type="button"],
.auth.auth [type="reset"],
.auth.auth [type="submit"]:not(.link),
.email-body button {
  @apply mt-2 py-3 px-4 rounded w-full font-medium;

  background-color: rgb(8, 10, 10);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.auth.auth button:hover,
.auth.auth [type="button"]:hover,
.auth.auth [type="reset"]:hover,
.auth.auth [type="submit"]:hover:not(.link),
.email-body button:hover {
  @apply bg-rb-teal-200;
}

.auth.auth input:not(.link),
.auth.auth button,
.auth.auth textarea,
.auth.auth select {
  @apply rounded-md shadow-sm font-light text-sm focus:ring-rb-teal-200 focus:border-rb-teal-200 border-[color:var(--dark-primary-900)];
}

.email-body button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.field {
  @apply py-2 flex flex-col;
}

.links {
  @apply mt-4;
}

.links p,
.links form {
  @apply text-center py-1;
}

.notice,
.alert {
  @apply max-w-md text-center text-[color:var(--primary-900)] mt-4;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */