@tailwind base;
@tailwind components;
@tailwind utilities;

@config '../../../tailwind.animBuilder.config.js';

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@layer base {
  :root {
    --background: 216 7% 13%;
    --background-hover: 230 7% 18%;
    --background-disable: 228 6% 17%;
    --text: 0 0% 100%;
    --text-2: 214 9% 85%;
    --text-3: 220 4% 71%;
    --placeholder: 214 3% 59%;
    --border: 228 5% 21%;
    --border-2: 215 9% 27%;
    --border-active: 212 9% 35%;
    --button-primary: 11 97% 64%;
    --button-primary-hover: 11 74% 57%;
    --button-secondary: 215 9% 27%;
    --button-secondary-hover: 216 8% 24%;
    --button-tertiary: 230 4% 27%;
    --button-tertiary-hover: 230 5% 24%;
    --input: 220 8% 14%;
    --dropdown-hover: 231 3% 37%;
  }
}

@layer base {
  body {
    @apply m-0 p-0;
  }
}

.wcfab2025 * {
  @apply font-roboto border-0 border-solid border-border text-text p-0 m-0 box-border;

  h3,
  p {
    @apply text-xs font-normal;
  }
}
