Poboljsaj mi moju defaultnu temu da bude profesionalna i dobra prijatna kolor paleta za oci, nakon toga mi posalji ceo kod "@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 201 100% 98%;
    --foreground: 201 100% 10%;
    --card: 201 100% 96%;
    --card-foreground: 201 100% 10%;
    --popover: 201 100% 96%;
    --popover-foreground: 201 100% 10%;
    --primary: 201 100% 35%;
    --primary-foreground: 201 100% 98%;
    --secondary: 201 60% 60%;
    --secondary-foreground: 201 100% 10%;
    --muted: 201 40% 90%;
    --muted-foreground: 201 40% 40%;
    --accent: 201 80% 50%;
    --accent-foreground: 201 100% 98%;
    --destructive: 0 85% 60%;
    --destructive-foreground: 201 100% 98%;
    --border: 201 40% 85%;
    --input: 201 40% 90%;
    --ring: 201 100% 35%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 201 100% 5%;
    --foreground: 201 100% 95%;
    --card: 201 100% 8%;
    --card-foreground: 201 100% 95%;
    --popover: 201 100% 8%;
    --popover-foreground: 201 100% 95%;
    --primary: 201 100% 60%;
    --primary-foreground: 201 100% 5%;
    --secondary: 201 60% 40%;
    --secondary-foreground: 201 100% 95%;
    --muted: 201 40% 20%;
    --muted-foreground: 201 40% 60%;
    --accent: 201 80% 40%;
    --accent-foreground: 201 100% 95%;
    --destructive: 0 85% 50%;
    --destructive-foreground: 201 100% 95%;
    --border: 201 40% 25%;
    --input: 201 40% 20%;
    --ring: 201 100% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-image: radial-gradient(
        at 100% 100%,
        hsla(201, 100%, 35%, 0.1) 0px,
        transparent 50%
      ),
      radial-gradient(at 0% 0%, hsla(201, 100%, 35%, 0.1) 0px, transparent 50%);
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:-translate-y-1;
  }

  .card {
    @apply bg-card text-card-foreground rounded-lg shadow-lg border border-primary/20 backdrop-blur-sm;
  }
}

@layer utilities {
  .animate-gradient {
    background-size: 300% 300%;
    background-image: linear-gradient(
      -45deg,
      hsl(var(--primary)) 0%,
      hsl(var(--accent)) 25%,
      hsl(var(--secondary)) 51%,
      hsl(var(--primary)) 100%
    );
    animation: AnimateGradient 15s ease infinite;
  }

  @keyframes AnimateGradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .text-glow {
    text-shadow: 0 0 10px hsla(var(--primary), 0.5),
      0 0 20px hsla(var(--primary), 0.3), 0 0 30px hsla(var(--primary), 0.1);
  }

  .hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 25px -5px hsla(var(--primary), 0.4);
  }

  .glass-effect {
    background: hsla(var(--background), 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid hsla(var(--primary), 0.3);
    box-shadow: 0 8px 32px 0 hsla(var(--primary), 0.2);
  }

  .neon-border {
    box-shadow: 0 0 5px hsla(var(--primary), 0.5),
      0 0 10px hsla(var(--primary), 0.3), 0 0 15px hsla(var(--primary), 0.1),
      inset 0 0 5px hsla(var(--primary), 0.2);
  }

  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      45deg,
      hsl(var(--primary)),
      hsl(var(--secondary))
    );
  }
}
"