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

@layer utilities {
  .text-primary {
    @apply text-gray-900 dark:text-gray-100;
  }

  .text-secondary {
    @apply text-gray-600 dark:text-gray-400;
  }

  th,
  .font-thin,
  .font-extralight,
  .font-light,
  .font-normal,
  .font-medium,
  .font-semibold,
  .font-bold,
  .font-extrabold,
  .font-black {
    font-weight: unset;
  }

  th {
    font-variation-settings: 'wght' 600;
  }

  .font-thin {
    font-variation-settings: 'wght' 100;
  }

  .font-extralight {
    font-variation-settings: 'wght' 200;
  }

  .font-light {
    font-variation-settings: 'wght' 300;
  }

  .font-normal {
    font-variation-settings: 'wght' 400;
  }

  .font-medium {
    font-variation-settings: 'wght' 500;
  }

  .font-semibold {
    font-variation-settings: 'wght' 600;
  }

  .font-bold {
    font-variation-settings: 'wght' 700;
  }

  .font-extrabold {
    font-variation-settings: 'wght' 800;
  }

  .font-black {
    font-variation-settings: 'wght' 900;
  }

  .font-numeric {
    font-feature-settings: 'tnum';
    letter-spacing: -0.5px;
  }

  .eth-address {
    font-variant-ligatures: no-contextual;
  }

  .text-gradient {
    @apply bg-blue-500;

    background-image: linear-gradient(
      45deg,
      theme('colors.blue.700'),
      theme('colors.pink.500')
    );
    background-size: 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  }

  .link {
    @apply text-blue-600 hover:text-purple-600 focus:text-purple-600 dark:text-blue-400 dark:hover:text-yellow-500
      dark:focus:text-yellow-500 hover:underline focus:underline transition-all;
  }

  .link-black {
    @apply text-gray-900 hover:text-purple-600 focus:text-purple-600 dark:text-gray-100 dark:hover:text-yellow-500
      dark:focus:text-yellow-500 hover:underline focus:underline transition-all;
  }

  .text-shadow {
    text-shadow: 0 1px 0 rgb(0 0 0 / 10%), 4px 4px 8px rgb(0 0 0 / 15%);
  }
}
