/* Import parent project's color variables */
:root {
  /* Colors from UntitledUI */
  --white: #fff;
  --black: #000;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --primary-25: #fcfaff;
  --primary-50: #f9f5ff;
  --primary-100: #f4ebff;
  --primary-200: #e9d7fe;
  --primary-300: #d6bbfb;
  --primary-400: #b692f6;
  --primary-500: #9e77ed;
  --primary-600: #7f56d9;
  --primary-700: #6941c6;
  --primary-800: #53389e;
  --primary-900: #42307d;
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #d1fadf;
  --success-200: #a6f4c5;
  --success-300: #6ce9a6;
  --success-400: #32d583;
  --success-500: #12b76a;
  --success-600: #039855;
  --success-700: #027a48;
  --success-800: #05603a;
  --success-900: #054f31;

  /* Box Shadows */
  --shadow-xs: 0 1px 2px 0 #1018280d;
  --shadow-sm: 0 1px 2px 0 #1018280f, 0 1px 3px 0 #1018281a;
  --shadow-md: 0 2px 4px -2px #1018280f, 0 4px 8px -2px #1018281a;
  --shadow-lg: 0 4px 6px -2px #10182808, 0 12px 16px -4px #10182814;
  --shadow-xl: 0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814;
  --shadow-2xl: 0 24px 48px -12px #1018282e;
  --shadow-3xl: 0 32px 64px -12px #10182824;

  /* Typography */
  --fosi-1: 0.75rem;
  --fosi-2: 0.875rem;
  --fosi-3: 1rem;
  --fosi-4: 1.125rem;
  --fosi-5: 1.25rem;
  --fosi-6: 1.5rem;
  --fosi-7: 1.875rem;
  --fosi-8: 2.25rem;
  --fosi-9: 3rem;
  --fowe-1: normal;
  --fowe-2: normal;
  --fowe-3: bold;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: normal;
}

h1 {
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
}

h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: -0.1rem;
}

h3 {
  font-size: 3rem;
  line-height: 1.3;
  letter-spacing: -0.1rem;
}

h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: -0.08rem;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
}

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}

p {
  margin-top: 0;
}

ol,
ul {
  padding-left: 0;
  margin-top: 0;
}

ol {
  list-style: decimal inside;
  margin-bottom: 2.5rem;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: unset;
  text-decoration: none;
}

a:hover {
  color: unset;
  text-decoration: none;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

pre,
blockquote,
dl,
figure,
table,
p,
ol,
form {
  margin-bottom: 2.5rem;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 4.2rem;
  }

  h3 {
    font-size: 3.6rem;
  }

  h4 {
    font-size: 3rem;
  }

  h5 {
    font-size: 2.4rem;
  }

  h6 {
    font-size: 1.5rem;
  }
}