@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

@layer base {
  :root {
    --primary-150: 29, 70%, 31%;
    --primary-250: 24, 63%, 59%; /* #D88A55 */
    --primary-350: 336, 77%, 54%; /* #E4317A */
    --primary-450: 116, 55%, 47%; /* #3FBC36 */
    --primary-550: 0, 0%, 67%; /* #ABABAB */

    --secondary-150: 211, 78%, 53%; /* #2984E5 */
    --secondary-200: 39, 97%, 58%; /* #FCB12A */
    --secondary-250: 219 100% 15%; /* #001A4C */
    --secondary-300: 0, 0%, 85%, 1; /* #D9D9D9 */
    --secondary-350: 282, 85%, 47%, 1; /* #A212DF */
    --secondary-400: 38, 50%, 46%, 1; /* #AF853A */
    --secondary-450: 0, 0%, 85%, 1; /* #D9D9D9 */
    --secondary-500: 211, 78%, 53%, 1; /* #2984E5 */
    --secondary-550: 0, 0%, 97%; /* #F8F8F8 */
    --secondary-600: 98, 100%, 89%; /* #DCFFC7 */
    --secondary-650: 352, 86%, 44%, 1; /* #CF1028 */
    --secondary-700: 214, 65%, 55%, 1; /* #4081D6 */
    --secondary-750: 173, 42%, 47%, 1; /* #45A99D */
    --secondary-800: 343, 66%, 55%, 1; /* #D83E69 */
    --secondary-850: 220, 3%, 90%, 1; /* #E5E5E6 */

    /* Border color palette */
    --border-250: 0, 0%, 87%; /* #DFDFDF */
    --border-400: 220, 15%, 92%; /* #e8eaee */
  }
}