@import "tailwindcss";

@theme {
  /* Colors */
  --color-p1: #0071e3;
  --color-p2: #37c272;
  --color-bg1: #ffffff;
  --color-bg2: #f5f5f7;
  --color-bg3: #e8e8ed;
  --color-n1: #1d1d1f;
  --color-n2: #6e6e73;
}

@layer utilities {
  /* custom bg gradient */
  .bg-gradient {
     background: url("/public/images/gradient.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }
}


/* beautiful custom shadow */
@utility shadow-custom {
  @apply translate-y-0 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.03),0px_1px_1px_-0.5px_rgba(0,0,0,0.03),0px_3px_3px_-1.5px_rgba(0,0,0,0.03),_0px_6px_6px_-3px_rgba(0,0,0,0.03),0px_12px_12px_-6px_rgba(0,0,0,0.03),0px_24px_24px_-12px_rgba(0,0,0,0.03)];
}

/* Example utility for container */
@utility px-custom {
  @apply max-w-7xl px-4;
}

/* Custom utilities layer for Tailwind v3 */
@layer utilities {
  /* custom bg gradient */
  .bg-gradient {
     background: url("/public/images/gradient.webp");
    background-repeat: no-repeat;
    background-size: cover;
  }



  /* Custom gradient for text */
  .text-gradient {
    background-image: linear-gradient(to bottom right, #43f0b6, #37c272);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* border class for quick testing */
  .b {
    @apply border border-red-600;
  }

  /* bg color change on different screen sizes (for responsive testing)*/
  .s {
    @apply sm:bg-purple-200 md:bg-purple-400 lg:bg-purple-600 xl:bg-purple-800 2xl:bg-purple-950;
  }
}