:root {
  --color-primary-100: #e6eded;
  --color-primary-200: #ccdbda;
  --color-primary-300: #99b7b5;
  --color-primary-600: #004a46;
  --color-primary-700: #003b38;

  --color-grey-50: #f9fafb;
  --color-grey-200: #eaecf0;
  --color-grey-300: #d0d5dd;
  --color-grey-350: #bec0c7;
  --color-grey-500: #667085;
  --color-grey-600: #475467;
  --color-grey-700: #344054;
  --color-grey-900: #101828;

  --color-white: #ffffff;

  --box-shadow-grey-900: #1018280d;
}

body,
html {
  height: 100%;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-grey-50);
  font-family: sans-serif;
  font-size: 16px;
  color: var(--color-grey-900);
  overflow: hidden auto;

  h2 {
      margin: 0 !important;
  }

  ol {
      padding-left: inherit;
      margin: 0;
  }

  input {
      width: 100%;
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--color-grey-300);
      border-radius: 8px;
      box-shadow: 0 1px 2px 0 var(--box-shadow-grey-900);
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: var(--color-grey-900);

      &::placeholder {
          color: var(--color-grey-500);
      }

      &:focus {
          border: 1px solid var(--color-primary-300);
          box-shadow: 0 0 0 4px var(--color-primary-100);
      }

      &:focus-visible {
          outline: 0;
      }
  }

  a {
      text-decoration: none;
      cursor: pointer;
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
      color: var(--color-primary-700);
  }

  button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 0.625rem 0.875rem;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
      outline: none;
  }

  button[theme="primary"] {
      background-color: var(--color-primary-600);
      color: var(--color-white);
      border: 1px solid var(--color-primary-600);

      &:disabled {
          background-color: var(--color-primary-200);
          border-color: var(--color-primary-200);
      }
  }

  button[theme="primary-outline"] {
      color: var(--color-primary-600);
      background-color: inherit;
      border: none;
  }

  button[theme="secondary-outline"] {
      color: var(--color-grey-700);
      background-color: inherit;
      border: 1px solid var(--color-grey-300);
      box-shadow: 0px 1px 2px 0px var(--box-shadow-grey-900);
  }

  button[theme="grey-text"] {
      color: var(--color-grey-600);
      background-color: inherit;
      border: none;
      box-shadow: none;
  }

  label {
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: var(--color-grey-700);
  }

  .input-container {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--color-grey-300);
      border-radius: 8px;
      box-shadow: 0 1px 2px 0 var(--box-shadow-grey-900);

      input {
          width: calc(100% - 2.265rem);
          padding: 0;
          border: 0;
          border-radius: 0;
          box-shadow: none;
      }

      .input-end-icon {
          position: absolute;
          right: 0.875rem;
      }
  }

  .input-groups {
      display: flex;
      align-items: center;
      gap: 0.75rem;
  }

  .input-label {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.375rem;
  }

  .input-hints {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.375rem;
      margin-top: 0.375rem;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: var(--color-grey-600);
  }

  .separator {
      display: flex;
      align-items: center;
      text-align: center;
      width: 100%;
  }

  .separator::before,
  .separator::after {
      content: "";
      flex: 1;
      border-bottom: 1px solid var(--color-grey-200);
  }

  .separator-text {
      padding: 0 0.5rem;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: var(--color-grey-600);
  }

  .upload {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      cursor: pointer;
      border: 1px solid var(--color-grey-200);
      border-radius: 8px;

      .upload-img {
          border-radius: 100%;
          border: 1px solid var(--color-grey-200);
      }

      .upload-input {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          opacity: 0;
          cursor: pointer;
      }
  }

  .text-primary {
      color: var(--color-primary-700);
  }

  .text-grey {
      color: var(--color-grey-600);
  }

  .text-black {
      color: var(--color-grey-900);
  }

  .leading-1 {
      line-height: 4px;
  }

  .leading-2 {
      line-height: 8px;
  }

  .leading-3 {
      line-height: 12px;
  }

  .leading-4 {
      line-height: 16px;
  }

  .leading-5 {
      line-height: 20px;
  }

  .leading-6 {
      line-height: 24px;
  }

  .leading-7 {
      line-height: 28px;
  }

  .leading-8 {
      line-height: 32px;
  }

  .text-sm {
      font-size: 14px;
  }

  .text-md,
  .text-default {
      font-size: 16px;
  }

  .text-lg {
      font-size: 18px;
  }

  .text-2xl {
      font-size: 24px;
  }

  .text-3xl {
      font-size: 30px;
  }

  .text-4xl {
      font-size: 36px;
  }

  .text-5xl {
      font-size: 48px;
  }

  .font-normal {
      font-weight: 400;
  }

  .font-medium {
      font-weight: 500;
  }

  .font-semibold {
      font-weight: 600;
  }

  .font-bold {
      font-weight: 700;
  }

  .text-right {
      text-align: right;
  }

  .text-left {
      text-align: left;
  }

  .text-center {
      text-align: center;
  }

  .text-justify {
      text-align: justify;
  }

  .flex {
      display: flex;
  }

  .flex-row {
      flex-direction: row;
  }

  .flex-col {
      flex-direction: column;
  }

  .items-center {
      align-items: center;
  }

  .items-start {
      align-items: flex-start;
  }

  .items-end {
      align-items: flex-end;
  }

  .items-stretch {
      align-items: stretch;
  }

  .justify-center {
      justify-content: center;
  }

  .justify-start {
      justify-content: flex-start;
  }

  .justify-end {
      justify-content: flex-end;
  }

  .self-center {
      align-self: center;
  }

  .self-start {
      align-self: flex-start;
  }

  .self-end {
      align-self: flex-end;
  }

  .flex-1 {
      flex: 1;
  }

  .gap-1 {
      gap: 0.25rem;
  }

  .gap-2 {
      gap: 0.5rem;
  }

  .gap-3 {
      gap: 0.75rem;
  }

  .gap-4 {
      gap: 1rem;
  }

  .gap-5 {
      gap: 1.25rem;
  }

  .gap-6 {
      gap: 1.5rem;
  }

  .gap-7 {
      gap: 1.75rem;
  }

  .gap-8 {
      gap: 2rem;
  }

  .m-0 {
      margin: 0;
  }

  .p-0 {
      padding: 0;
  }

  .h-full {
      height: 100%;
  }

  .w-full {
      width: 100%;
  }

  .w-50 {
      width: 50%;
  }

  .h-50 {
      height: 50%;
  }

  .cursor-pointer {
      cursor: pointer;
  }

  .error-message {
    font-size: 14px;
    color: red;
  }
}

/* Mobile View */
@media screen and (max-width: 720px) {
    body {
        background-color: var(--color-white);
    }
}