/* prettier-ignore-start */
@import url('tailwind.css');
@import url('buttons.css');
@import url('input.css');

:root {
  /* Custom colors from design, names can be changed */
  --booksquare-purple: #40005e;
  --booksquare-purple-10: #2b0040;
  --booksquare-lavender: #f3e3ff;
  --booksquare-green: #535900;
  --booksquare-green-07: #757a33;
  --booksquare-green-10: #292c00;
  --booksquare-bright-red: #ff6a39;
  --booksquare-soft-grey: #f2f2f2;
  --booksquare-warm-grey: #b2a59f;
  --booksquare-warm-grey-2: #dfdfdf;
  --booksquare-warm-grey-darker: #79675f;
  --booksquare-shade-00: #ff8860;

  --breakpoint-xs-320: 320px; /* iPhone SE, 7 */
  --breakpoint-xs-360: 360px; /* Galaxy Note 3, S8 devices 360px */
  --breakpoint-xs-375: 375px; /* iPhone SE 375px */
  --breakpoint-xs-390: 390px; /* iPhone 12 Pro 390px */
  --breakpoint-xs-414: 414px; /* iPhone XR 414px */
  --breakpoint-xs-430: 430px; /* iPhone 14 Pro Max 430px */
  --breakpoint-md: 768px; /* iPad 768px */
  --breakpoint-2md: 820px; /* iPad 820px */
  --breakpoint-lg: 1024px; /* iPad 1024px */
  --breakpoint-xl: 1280px; /* iPad, Laptop 1820px */
  --breakpoint-2xl: 1366px; /* Laptop 15.6 inch 1366px */
  --breakpoint-3xl: 1440px; /* Desktop 1440px */
  --breakpoint-4xl: 1536px; /* Desktop 1536px */
}

/* Booksquare background colors */
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-booksquare-purple { background-color: var(--booksquare-purple); }
.bg-booksquare-purple-10 { background-color: var(--booksquare-purple-10); }
.bg-booksquare-lavender { background-color: var(--booksquare-lavender); }
.bg-booksquare-green { background-color: var(--booksquare-green); }
.bg-booksquare-green-07 { background-color: var(--booksquare-green-07); }
.bg-booksquare-green-10 { background-color: var(--booksquare-green-10); }
.bg-booksquare-bright-red { background-color: var(--booksquare-bright-red); }
.bg-booksquare-soft-grey { background-color: var(--booksquare-soft-grey); }
.bg-booksquare-warm-grey { background-color: var(--booksquare-warm-grey); }
.bg-booksquare-warm-grey-2 { background-color: var(--booksquare-warm-grey-2); }
.bg-booksquare-warm-grey-darker { background-color: var(--booksquare-warm-grey-darker); }

/* Booksquare text colors */
.text-white { color: #fff; }
.text-black { color: #000; }
.text-booksquare-purple { color: var(--booksquare-purple); }
.text-booksquare-purple-10 { color: var(--booksquare-purple-10); }
.text-booksquare-lavender { color: var(--booksquare-lavender); }
.text-booksquare-green { color: var(--booksquare-green); }
.text-booksquare-green-07 { color: var(--booksquare-green-07); }
.text-booksquare-green-10 { color: var(--booksquare-green-10); }
.text-booksquare-bright-red { color: var(--booksquare-bright-red); }
.text-booksquare-soft-grey { color: var(--booksquare-soft-grey); }
.text-booksquare-warm-grey { color: var(--booksquare-warm-grey); }
.text-booksquare-warm-grey-2 { color: var(--booksquare-warm-grey-2); }
.text-booksquare-warm-grey-darker { color: var(--booksquare-warm-grey-darker); }


.border-b-0 { border-bottom: 0; }
.border-t-0 { border-top: 0; }
.border-t-dashed {
  border-top: 1px dashed #bdbdbd;
  width: 100%;
}
.border-b-warm-grey {
  border-bottom: 1px solid var(--booksquare-warm-grey-2);
  width: 100%;
}
.border-booksquare-green {
  border-bottom: 1px dotted var(--booksquare-green);
  width: 100%;
}

.border-none {
  border: none;
}

@media (min-width: 1024px) {
  .lg\:border-b-0 { border-bottom: 0; }
  .lg\:border-t-0 { border-top: 0; }  
}

@media (min-width: 1280px) {
  .xl\:border-b-0 { border-bottom: 0; }
  .xl\:border-t-0 { border-top: 0; }  
}
@media (max-width: 390px) {
  .mobile-only {
    display: block !important;
  }
}
@media (min-width: 391px) {
  .deskt-only {
    display: block !important;
  }
}
/* prettier-ignore-end */