global.css

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

@font-face {
  font-family: "Inter-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.ttf") format("embedded-opentype"),
    /* Internet Explorer */ url("../fonts/Inter-Regular.ttf") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/Inter-Regular.ttf") format("woff"),
    /* Pretty Modern Browsers */ url("../fonts/Inter-Regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/Inter-Regular.ttf") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Inter-SemiBold";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.ttf") format("embedded-opentype"),
    /* Internet Explorer */ url("../fonts/Inter-SemiBold.ttf") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/Inter-SemiBold.ttf")
      format("woff"),
    /* Pretty Modern Browsers */ url("../fonts/Inter-SemiBold.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/Inter-SemiBold.ttf") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Inter-Black";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Inter-Black.ttf") format("embedded-opentype"),
    /* Internet Explorer */ url("../fonts/Inter-Black.ttf") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/Inter-Black.ttf") format("woff"),
    /* Pretty Modern Browsers */ url("../fonts/Inter-Black.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/Inter-Black.ttf") format("svg"); /* Legacy iOS */
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-hover: 0 0% 97%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 237 100% 70%;
    --primary-foreground: 237 100% 99%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 237 100% 70%;
    --accent-foreground: 237 100% 99%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --font-sans: "Inter-Regular", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";

    --font-semibold: "Inter-SemiBold", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
      "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";

    --font-bold: "Inter-Black", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";

    --grid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply scroll-smooth;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
  p {
    @apply pb-4;
  }
  a:not([class]),
  .link {
    @apply text-primary hover:text-primary/80 underline;
  }
}

@layer components {
  .bg-move {
    @apply bg-gradient-to-r from-violet-600 via-indigo-600 to-yellow-600 animate-background-move bg-400%;
  }
  .bg-title {
    @apply bg-gradient-to-r from-violet-600 via-indigo-600 to-yellow-600 bg-clip-text inline-block text-transparent animate-background-move bg-400%;
  }
}