thrillwiki_laravel/resources/css/app.css

@import 'alerts.css';

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

/* Custom base styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

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

/* Custom components */
@layer components {
    .nav-link {
        @apply flex items-center gap-2 px-3 py-2 text-gray-500 transition-colors rounded-lg hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700;
    }

    .site-logo {
        @apply text-2xl;
    }

    .menu-item {
        @apply flex items-center gap-3 px-4 py-2 text-gray-600 transition-colors dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
    }

    .form-input {
        @apply w-full px-4 py-2 text-gray-700 transition-colors bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 border-gray-200/50 dark:border-gray-700/50 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20;
    }

    .btn {
        @apply px-4 py-2 font-semibold text-white transition-colors rounded-lg shadow-lg bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-primary/20;
    }

    .btn-secondary {
        @apply text-gray-700 bg-white border dark:bg-gray-800 dark:text-white border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700;
    }

    .alert {
        @apply relative px-4 py-3 mb-4 text-white rounded-lg;
    }

    .alert-success {
        @apply bg-green-500;
    }

    .alert-error {
        @apply bg-red-500;
    }

    .alert-warning {
        @apply bg-yellow-500;
    }

    .alert-info {
        @apply bg-blue-500;
    }
}

/* Custom utilities */
@layer utilities {
    .text-gradient {
        @apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary;
    }
}