@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --red-900: #76000a;
  --red-800: #a9000f;
  --red-700: #e2001a;
  --red-600: #ef3243;
  --red-500: #f14958;
  --red-400: #f25f6d;
  --red-200: #f79fa7;
  --red-150: #ffe3e5;
  --red-100: #ded5d5;
  --red-50: #f1e4e5;

  --gray-1000: #1e2023;
  --gray-900: #3f3f3f;
  --gray-400: #575a65;
  --gray-300: #8a98a5;
  --gray-200: #ccd9e0;
  --gray-150: #d9d9d9;
  --gray-100: #ecf0f2;
  --gray-50: #f5f7f8;

  --orange-900: #943a00;
  --orange-800: #c55002;
  --orange-700: #f96302;
  --orange-400: #fb924e;
  --orange-100: #ffede0;
  --orange-50: #fff9f5;

  --neutral-black: #000000;
  --neutral-white: #ffffff;

  --green-900: #29823d;
  --green-700: #6ad47c;
  --green-600: #6ad57c;
  --green-400: #cdefd3;
  --green-50: #e9efea;

  --yellow-900: #d88100;

  --blue-900: #006eac;
  --blue-600: #2970b6;
  --blue-400: #009ee3;
  --blue-200: #ddeff9;
  --blue-100: #bee3f7;
  --blue-50: #edf9ff;

  --shadow-color: #00000026;

  --font-size-xl: 30px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;

  --font-family: Montserrat, sans-serif;

  --gray-border: #E6E8EC;
  --footer-link: rgba(20, 27, 42, 0.75);
  --gray-header: #141B2A;

  /* proper namings for those from Edvin */
  --signup-header-title: #111827;
  --signup-header-text: #4B5563;

  --input-border: #D1D5DB;
  --input-text: #64748B;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.43;
  color: var(--gray-900);
  font-weight: 400;
  font-size: var(--font-size-sm);
  background: var(--gray-50);
}

* {
  scrollbar-width: thin;
  /* firefox thumbBg and trackBackground */
  scrollbar-color: var(--gray-200) var(--neutral-white);
}

*::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background-color: var(--neutral-white) !important;
}

*::-webkit-scrollbar-track {
  background: var(--neutral-white) !important;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--gray-200) !important;
  border-radius: 4px !important;
  transition: color 0.3s ease-in-out !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-300) !important;
}

b {
  font-weight: 600;
}

a {
  color: inherit;
}

p {
  font-weight: 400;
  font-size: var(--font-size-sm);
  line-height: 22px;
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 36px;
}

h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 28px;
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

button,
a[role=button] {
  height: 40px;
  padding: 10px 14px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

button.white,
a[role=button].white {
  border: 1px solid var(--red-700);
  background-color: var(--neutral-white);
  color: var(--red-700);
}

button.white:hover,
a[role=button].white:hover {
  border: 1px solid var(--neutral-white);
  background-color: var(--red-700);
  color: var(--neutral-white);
}

button.red,
a[role=button].red {
  border: 1px solid var(--neutral-white);
  background-color: var(--red-700);
  color: var(--neutral-white);
}

button.red:hover,
a[role=button].red:hover {
  border: 1px solid var(--red-700);
  background-color: var(--neutral-white);
  color: var(--red-700);
}

input {
  flex: 1;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 0 16px;
  color: var(--input-text);
  font-weight: 500;
  border-radius: 8px;
  border: none;
  outline: 1px solid var(--input-border);
}

input:focus:valid,
input:active:valid {
  outline: 2px solid var(--input-border);
}

input[type=checkbox] {
  width: 16px;
  min-height: 16px;
  max-height: 16px;
  height: 16px;
  border-radius: 4px;
  /* checkbox has to use border, not outline */
  border: 1px solid var(--gray-300);
  outline: none !important;
  accent-color: var(--red-700);
}

input:valid {
  outline: 1px solid var(--input-border);
}

.was-validated input {
  outline: 2px solid var(--red-700);
}

.was-validated input:valid {
  outline: 1px solid var(--input-border);
}

input:invalid.touched {
  outline: 2px solid var(--red-700);
}