@import 'tailwindcss';

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --color-charcoal: #2c2c2c;
}

/* ===== ADMIN DARK MODE ===== */
@custom-variant dark (&:where(.dark, .dark *));

/* Smooth transition saat toggle dark mode */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}