@import 'tailwindcss';
@import '@nuxt/ui';

body {
  font-family: "Inter", sans-serif;
}

.inter {
  font-family: "Inter", sans-serif;
}

.container{
  max-width: 2100px;
}

@theme {
  --main-light: #FFFEFB;
  --second-light: #F5F6FA;

  --main-dark: #212121;
  --black: #1A1A1A;

  /* gray */
  --gray: #E5E7EB;
  --gray-dark: #6B7280;

  /* borders */
  --border-light: #E8E7E0;
  --border-dark: #3F3E3D;

  /* text */
  --accent-blue-dark: #3B82F6;
  --accent-blue-light:#2563EB;
  --text-dark: #FFFEFB;

  /* placeholder */
  --placeholder: #8C8C8A;

  --ui-bg: var(--main-light);
  --ui-border-accented: var(--border-light);
  --ui-border: var(--border-light);
  --ui-color-neutral-700: var(--black);
}

.dark {
  --ui-bg: var(--black);
  --ui-primary: var(--color-gray-500);
  --ui-secondary: var(--accent-green-dark);
  --ui-border-accented: var(--border-dark);
  --ui-text-dimmed: var(--gray-dark);
  --ui-border: var(--border-dark);
  --ui-bg-elevated: var(--color-gray-500);
  --ui-error: var(--dark-red);
  --border: var(--border-dark);
    --tw-border-style: var(--border-dark);
}

  .label-form {
    @apply text-(--gray) dark:text-(--gray-dark) pl-0 md:pl-6 leading-none;
  }

  .title {
    @apply font-medium text-[19px] sm:text-xl md:text-[22px] leading-none text-(--black) dark:text-(--main-light);
  }

  .column-title {
    @apply md:ml-[25px] mb-[25px] sm:mb-[30px];
  }

  .form-title {
    @apply text-(--accent-green) dark:text-(--accent-green-dark) font-medium;
  }