@use './variables' as vars;

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-sans font-semibold tracking-tight;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .gradient-hero {
    background: var(--gradient-hero);
  }

  .gradient-accent {
    background: var(--gradient-accent);
  }

  .gradient-subtle {
    background: var(--gradient-subtle);
  }

  .gradient-card {
    background: var(--gradient-card);
  }

  .gradient-dark {
    background: var(--gradient-dark);
  }

  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  .to-accent {
    --tw-gradient-to: hsl(var(--accent));
  }
}