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

@layer base {
  :root {
    --background: 340 14% 97%;
    --foreground: 240 33% 17%;
    --card: 0 0% 100%;
    --card-foreground: 240 33% 17%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 33% 17%;
    --primary: 330 100% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 33% 17%;
    --secondary-foreground: 0 0% 100%;
    --muted: 340 14% 93%;
    --muted-foreground: 240 10% 45%;
    --accent: 340 14% 93%;
    --accent-foreground: 240 33% 17%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 340 14% 88%;
    --input: 340 14% 88%;
    --ring: 330 100% 45%;
    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }

  html, body {
    @apply m-0 p-0;
  }

  body {
    @apply bg-vivason-bg text-foreground font-sans antialiased;
  }
}

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