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

@layer components {
  .heading {
    @apply font-primary text-dark-gray dark:text-white text-head-mobile md:text-head;
  }

  .subheading {
    @apply tracking-widest text-subhead font-secondary uppercase text-dg-secondary font-semibold;
  }

  .h3-heading {
    @apply font-secondary text-title font-semibold capitalize;
  }

  .title {
    @apply border-dg-primary-1000 capitalize text-dg-primary-1000 hover:border-dg-primary-1200 hover:text-white transition-all hover:transition-all;
  }
  .paragraph {
    @apply text-p-mobile md:text-p text-dark-gray dark:text-white;
  }

  .display-number {
    @apply text-display-numb font-secondary font-bold  text-dg-primary-1000;
  }
  .number-title {
    @apply text-title-24 font-secondary font-normal text-dark-gray;
  }

  .title-card {
    @apply text-title font-semibold;
  }

  .subtitle-card-italic {
    @apply text-p-italic italic font-light text-dg-primary-900;
  }
  .subtitle-card-italic-gray {
    @apply text-p-italic italic font-light;
  }

  .title-italic {
    @apply text-italic-title text-dg-primary-400 font-semibold italic my-8p capitalize;
  }
}

.no-wrap {
  flex-wrap: nowrap;
}

.title-colored {
  background: linear-gradient(270deg, #90278f 0%, #8468bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.italic {
  font-style: italic;
}
