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

body {
    font-family: 'Inter', sans-serif;
}

.hero-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#word-carousel {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all hover:shadow-lg hover:shadow-blue-500/20;
}

.btn-secondary {
    @apply border border-gray-600 text-gray-300 px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all hover:bg-gray-800;
}

.feature-card {
    @apply bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all;
}

.feature-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-white mb-4;
}

.feature-icon i {
    @apply w-6 h-6;
}

.form-input {
    @apply w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.form-checkbox {
    @apply rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500;
}

.village-list {
    @apply divide-y divide-gray-700;
}

.village-item {
    @apply grid grid-cols-12 p-4 items-center hover:bg-gray-750 transition-colors;
}

.village-status {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.status-healthy {
    @apply bg-green-900 text-green-200;
}

.status-degraded {
    @apply bg-yellow-900 text-yellow-200;
}

.status-failed {
    @apply bg-red-900 text-red-200;
}

.reputation-score {
    @apply w-full bg-gray-600 rounded-full h-2.5;
}

.reputation-fill {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full;
}

/* Knowledge Graph Styles */
.node {
    transition: all 0.3s ease;
    cursor: pointer;
}

.node:hover {
    filter: brightness(1.2);
}

.node text {
    pointer-events: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Animation for cards */
.card-enter {
    opacity: 0;
    transform: translateY(10px);
}

.card-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
}

.card-exit {
    opacity: 1;
}

.card-exit-active {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms, transform 300ms;
}