@import url('https://fonts.googleapis.com/css2?family=Mali:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    --kru-blue: #24c6f3;
    --kru-orange: #f7941d;
    --kru-green: #8cc63f;
    --kru-pink: #f06eaa;
    --kru-purple: #9b5de5;
    --kru-red: #f25c5c;
    --kru-yellow: #fcd34d;
    --kru-dark: #2d3748;
    --kru-light: #f0f9ff;
    --kru-light-strong: #d9effb;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-white text-kru-dark antialiased;
    font-family: 'Mali', cursive, sans-serif;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, var(--kru-blue) 0%, var(--kru-purple) 100%);
  }
  .bg-kru-gradient {
    background: linear-gradient(135deg, var(--kru-blue) 0%, var(--kru-purple) 100%);
  }
  .shadow-kru {
    box-shadow: 0 10px 40px -10px rgba(36, 198, 243, 0.3);
  }
  .shadow-kru-orange {
    box-shadow: 0 10px 40px -10px rgba(247, 148, 29, 0.3);
  }
  .hover-lift {
    @apply transition-all duration-300;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
  }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-editor-reset ul {
    list-style-type: disc !important;
    margin: 1em 0 !important;
    padding-left: 40px !important;
  }

  .text-editor-reset ol {
    list-style-type: decimal !important;
    margin: 1em 0 !important;
    padding-left: 40px !important;
  }

  .text-editor-reset li {
    display: list-item !important;
    margin: 0.5em 0 !important;
    padding: 0 !important;
  }

  .text-editor-reset li::before {
    content: none !important;
  }

  .text-editor-reset :where(p, h1, h2, h3, h4, h5, h6) {
    margin: revert !important;
    font-size: revert !important;
    font-weight: revert !important;
    line-height: revert !important;
    color: revert !important;
  }
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--kru-light-strong);
}
::-webkit-scrollbar-thumb {
  background: var(--kru-blue);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--kru-purple);
}

::selection {
  background: rgba(36, 198, 243, 0.3);
  color: var(--kru-dark);
}

[x-cloak] { display: none !important; }