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

body {
  font-family: Arial, Helvetica, sans-serif;
}

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

@layer base {
  :root {
    --backgradient: 240 67% 94%;
    --backgradientvia: 240 75% 92%;
    --background: 240 5% 99%;
    --foreground: 234 16% 35%;
    --muted: 220 12% 90%;
    --muted-foreground: 220 12% 30%;
    --popover: 220 23% 92%;
    --popover-foreground: 234 16% 25%;
    --card: 264 23% 93%;
    --card-foreground: 234 16% 30%;
    --border: 220 13% 90%;
    --input: 220 13% 87%;
    --primary: 266 93% 69%;
    --primary-foreground: 0 0% 100%;
    --secondary: 264 78% 22%;
    --secondary-foreground: 266 30% 15%;
    --accent: 264 21% 89%;
    --accent-foreground: 220 23% 20%;
    --destructive: 3 87% 37%;
    --destructive-foreground: 3 87% 97%;
    --ring: 266 85% 58%;
    --radius: 0.5rem;
  }
  .violet {
    --backgradient: 240 67% 94%;
    --backgradientvia: 240 75% 92%;
    --background: 240 5% 99%;
    --foreground: 234 16% 35%;
    --muted: 220 12% 90%;
    --muted-foreground: 220 12% 30%;
    --popover: 220 23% 92%;
    --popover-foreground: 234 16% 25%;
    --card: 264 23% 93%;
    --card-foreground: 234 16% 30%;
    --border: 220 13% 90%;
    --input: 220 13% 87%;
    --primary: 266 93% 69%;
    --primary-foreground: 0 0% 100%;
    --secondary: 264 78% 22%;
    --secondary-foreground: 266 30% 15%;
    --accent: 264 21% 89%;
    --accent-foreground: 220 23% 20%;
    --destructive: 3 87% 37%;
    --destructive-foreground: 3 87% 97%;
    --ring: 266 85% 58%;
    --radius: 0.5rem;
  }
  .blue {
    --backgradient: 229 67% 94%;
    --backgradientvia: 229 75% 92%;
    --background: 229 57% 100%;
    --foreground: 229 63% 4%;
    --muted: 229 12% 86%;
    --muted-foreground: 229 10% 37%;
    --popover: 0 0% 99%;
    --popover-foreground: 229 63% 3%;
    --card: 0 0% 99%;
    --card-foreground: 229 63% 3%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --primary: 229 100% 62%;
    --primary-foreground: 0 0% 100%;
    --secondary: 229 20% 30%;
    --secondary-foreground: 229 20% 30%;
    --accent: 229 28% 85%;
    --accent-foreground: 229 28% 25%;
    --destructive: 3 100% 50%;
    --destructive-foreground: 3 0% 100%;
    --ring: 229 100% 62%;
    --radius: 0.5rem;
  }
  .green {
    --backgradient: 140 67% 94%;
    --backgradientvia: 140 75% 92%;
    --background: 126 35% 99%;
    --foreground: 126 50% 3%;
    --muted: 126 13% 91%;
    --muted-foreground: 126 10% 36%;
    --popover: 126 35% 99%;
    --popover-foreground: 126 50% 3%;
    --card: 126 35% 99%;
    --card-foreground: 126 50% 3%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --primary: 126 69% 63%;
    --primary-foreground: 126 69% 3%;
    --secondary: 126 35% 15%;
    --secondary-foreground: 126 11% 32%;
    --accent: 126 11% 92%;
    --accent-foreground: 126 11% 32%;
    --destructive: 22 85% 40%;
    --destructive-foreground: 0 0% 100%;
    --ring: 126 69% 63%;
    --radius: 0.5rem;
  }
  .orange {
    --backgradient: 30 67% 94%;
    --backgradientvia: 30 75% 92%;
    --background: 0 0% 97.65%;
    --foreground: 0 0% 12.55%;
    --muted: 0 0% 93.73%;
    --muted-foreground: 0 0% 39.22%;
    --popover: 0 0% 98.82%;
    --popover-foreground: 0 0% 12.55%;
    --card: 0 0% 98.82%;
    --card-foreground: 0 0% 12.55%;
    --border: 0 0% 84.71%;
    --input: 0 0% 94.12%;
    --primary: 22.93 92.59% 52.35%;
    --primary-foreground: 44 0% 100%;
    --secondary: 22.93 92.59% 15%;
    --secondary-foreground: 16.27 50.43% 22.94%;
    --accent: 0 0% 90.98%;
    --accent-foreground: 0 0% 12.55%;
    --destructive: 10.16 77.87% 53.92%;
    --destructive-foreground: 0 0% 100%;
    --ring: 24.8 79.79% 63.14%;
    --radius: 0.5rem;
  }
  .pink {
    --backgradient: 330 67% 94%;
    --backgradientvia: 330 75% 92%;
    --background: 0 0% 96%;
    --foreground: 0 0% 20%;
    --muted: 0 12% 90%;
    --muted-foreground: 0 12% 30%;
    --popover: 0 0% 93%;
    --popover-foreground: 0 0% 10%;
    --card: 0 0% 94%;
    --card-foreground: 0 0% 15%;
    --border: 0 0% 91%;
    --input: 0 0% 88%;
    --primary: 334 100% 74%;
    --primary-foreground: 334 100% 14%;
    --secondary: 334 60% 25%;
    --secondary-foreground: 334 30% 85%;
    --accent: 0 0% 81%;
    --accent-foreground: 0 0% 21%;
    --destructive: 6 82% 35%;
    --destructive-foreground: 6 82% 95%;
    --ring: 334 100% 74%;
    --radius: 0.5rem;
  }
  .gray {
    --backgradient: 0 67% 94%;
    --backgradientvia: 0 75% 92%;
    --background: 0 0% 94%;
    --foreground: 0 0% 6%;
    --muted: 0 12% 90%;
    --muted-foreground: 0 12% 30%;
    --popover: 0 0% 91%;
    --popover-foreground: 0 0% 0%;
    --card: 0 0% 92%;
    --card-foreground: 0 0% 1%;
    --border: 0 0% 89%;
    --input: 0 0% 86%;
    --primary: 0 0% 6%;
    --primary-foreground: 0 0% 66%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 15%;
    --accent: 0 0% 79%;
    --accent-foreground: 0 0% 19%;
    --destructive: 1 89% 43%;
    --destructive-foreground: 0 0% 100%;
    --ring: 0 0% 6%;
    --radius: 0.5rem;
  }

  /**************** DARK MODE ****************/

  .dark {
    --backgradient: 240 100% 3%;
    --backgradientvia: 240 100% 8%;
    --background: 240 50% 4%;
    --foreground: 0 0% 98%;
    --muted: 214 8% 15%;
    --muted-foreground: 214 12% 65%;
    --popover: 214 5% 5%;
    --popover-foreground: 218 7% 88%;
    --card: 264 80% 4%;
    --card-foreground: 218 7% 83%;
    --border: 214 7% 13%;
    --input: 214 7% 16%;
    --primary: 266 93% 69%;
    --primary-foreground: 0 0% 0%;
    --secondary: 264 78% 22%;
    --secondary-foreground: 270 30% 85%;
    --accent: 264 40% 25%;
    --accent-foreground: 214 17% 83%;
    --destructive: 2 89% 56%;
    --destructive-foreground: 0 0% 100%;
    --ring: 270 84% 66%;
    --radius: 0.5rem;
  }
  .violet-dark {
    --backgradient: 240 100% 3%;
    --backgradientvia: 240 100% 8%;
    --background: 240 50% 4%;
    --foreground: 0 0% 98%;
    --muted: 214 8% 15%;
    --muted-foreground: 214 12% 65%;
    --popover: 214 5% 5%;
    --popover-foreground: 218 7% 88%;
    --card: 264 80% 4%;
    --card-foreground: 218 7% 83%;
    --border: 214 7% 13%;
    --input: 214 7% 16%;
    --primary: 266 93% 69%;
    --primary-foreground: 0 0% 0%;
    --secondary: 264 78% 22%;
    --secondary-foreground: 270 30% 85%;
    --accent: 264 40% 25%;
    --accent-foreground: 214 17% 83%;
    --destructive: 2 89% 56%;
    --destructive-foreground: 0 0% 100%;
    --ring: 270 84% 66%;
    --radius: 0.5rem;
  }
  .blue-dark {
    --backgradient: 229 100% 3%;
    --backgradientvia: 229 100% 8%;
    --background: 229 41% 4%;
    --foreground: 229 23% 99%;
    --muted: 229 12% 14%;
    --muted-foreground: 229 10% 63%;
    --popover: 229 41% 5%;
    --popover-foreground: 0 0% 100%;
    --card: 229 41% 5%;
    --card-foreground: 0 0% 100%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --primary: 229 100% 62%;
    --primary-foreground: 0 0% 100%;
    --secondary: 229 20% 5%;
    --secondary-foreground: 229 14% 68%;
    --accent: 229 23% 17%;
    --accent-foreground: 229 23% 77%;
    --destructive: 3 89% 54%;
    --destructive-foreground: 0 0% 100%;
    --ring: 229 100% 62%;
  }
  .green-dark {
    --backgradient: 140 100% 3%;
    --backgradientvia: 140 100% 8%;
    --background: 126 58% 4%;
    --foreground: 126 12% 98%;
    --muted: 126 13% 9%;
    --muted-foreground: 126 10% 64%;
    --popover: 126 58% 1%;
    --popover-foreground: 126 12% 98%;
    --card: 126 58% 1%;
    --card-foreground: 126 12% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --primary: 126 69% 63%;
    --primary-foreground: 126 69% 3%;
    --secondary: 126 35% 15%;
    --secondary-foreground: 126 5% 75%;
    --accent: 126 5% 15%;
    --accent-foreground: 126 5% 75%;
    --destructive: 22 85% 53%;
    --destructive-foreground: 0 0% 0%;
    --ring: 126 69% 63%;
  }
  .orange-dark {
    --backgradient: 30 100% 3%;
    --backgradientvia: 30 100% 8%;
    --background: 0 10% 4%;
    --foreground: 0 0% 93.33%;
    --muted: 0 0% 13.33%;
    --muted-foreground: 0 0% 70.59%;
    --popover: 0 0% 9.8%;
    --popover-foreground: 0 0% 93.33%;
    --card: 0 0% 9.8%;
    --card-foreground: 0 0% 93.33%;
    --border: 44 14% 11%;
    --input: 0 0% 28.24%;
    --primary: 22.93 92.59% 52.35%;
    --primary-foreground: 29.51 0% 100%;
    --secondary: 22.93 92.59% 15%;
    --secondary-foreground: 29.51 100% 88.04%;
    --accent: 0 0% 16.47%;
    --accent-foreground: 0 0% 93.33%;
    --destructive: 10.16 77.87% 53.92%;
    --destructive-foreground: 0 0% 100%;
    --ring: 23.11 59.8% 40%;
  }
  .pink-dark {
    --backgradient: 330 100% 3%;
    --backgradientvia: 330 100% 8%;
    --background: 0 10% 4%;
    --foreground: 0 0% 87%;
    --muted: 0 12% 15%;
    --muted-foreground: 0 12% 65%;
    --popover: 0 0% 4%;
    --popover-foreground: 0 0% 97%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 92%;
    --border: 0 0% 12%;
    --input: 0 0% 15%;
    --primary: 317 80% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 317 60% 25%;
    --secondary-foreground: 317 30% 15%;
    --accent: 0 0% 22%;
    --accent-foreground: 0 0% 82%;
    --destructive: 1 93% 51%;
    --destructive-foreground: 0 0% 100%;
    --ring: 317 80% 52%;
    --radius: 0.5rem;
  }
  .gray-dark {
    --backgradient: 0 100% 3%;
    --backgradientvia: 0 100% 8%;
    --background: 0 0% 8%;
    --foreground: 0 0% 100%;
    --muted: 0 12% 15%;
    --muted-foreground: 0 12% 65%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;
    --card: 0 0% 6%;
    --card-foreground: 0 0% 100%;
    --border: 0 0% 13%;
    --input: 0 0% 16%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 20%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 85%;
    --accent: 0 0% 23%;
    --accent-foreground: 0 0% 83%;
    --destructive: 7 94% 46%;
    --destructive-foreground: 0 0% 100%;
    --ring: 0 0% 100%;
    --radius: 0.5rem;
  }

  @layer base {
    * {
      @apply border-border;
    }
    body {
      @apply bg-background text-foreground;
    }
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
