@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;
    
    --color-accent-500: #f59e0b;
    --color-accent-600: #d97706;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
    }

    ::selection {
        background: #fecaca;
        color: #7f1d1d;
    }
}

@layer utilities {
    /* Animasi reveal kartu saat masuk viewport (dipicu JS di layout) */
    .reveal-init {
        opacity: 0;
        transform: translateY(14px);
    }

    .reveal-in {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    @media (prefers-reduced-motion: reduce) {
        .reveal-init,
        .reveal-in {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}