@import "tailwindcss";

/* Custom theme colors */
@theme {
  --color-my-orange: #FC530A;
  --color-my-pink: #FF0D6C;
  --color-my-blue: #3A86FF;
}

/* Custom utilities and components */
@layer base {
  body {
    font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: rgb(51, 51, 51);
  }
}

@layer components {
  .text-gradient {
    background: linear-gradient(to right, var(--color-my-orange), var(--color-my-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }

  .line-height-36 {
    line-height: 36px !important;
  }

  .link-primary {
    @apply text-my-blue underline underline-offset-4 font-bold transition-colors;
  }

  .link-nav {
    @apply text-gray-600 font-bold tracking-tight transition-all;
  }

  .link-nav:hover {
    background: linear-gradient(to right, var(--color-my-orange), var(--color-my-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Animated dots for "vibe coding" */
  @keyframes dots {
    0%, 20% {
      content: "";
    }
    40% {
      content: ".";
    }
    60% {
      content: "..";
    }
    80%, 100% {
      content: "...";
    }
  }

  .dots {
    position: relative;
    display: inline-block;
    width: 40px;
    text-align: left;
    min-height: 1.2em;
  }

  .dots::after {
    content: "";
    display: inline-block;
    font-family: monospace;
    font-weight: 400;
    color: currentColor;
    animation: dots 1.5s steps(1, end) infinite;
  }
}