@import 'tailwindcss';

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

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Outfit', sans-serif;

    --color-topitup-red: #B91C1C;
    --color-topitup-redDark: #881313;
    --color-topitup-gold: #D97706;
    --color-topitup-goldLight: #F59E0B;
    --color-topitup-amber50: #FFFBEB;

    --color-fintech-bg: #F8FAFC;
    --color-fintech-card: #FFFFFF;
    --color-fintech-navy: #0F172A;
    --color-fintech-muted: #64748B;
    --color-fintech-border: #E2E8F0;

    --shadow-card-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
    --shadow-glow-red: 0 8px 24px -4px rgba(185, 28, 28, 0.35);
}

.bank-gradient-header {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #d97706 100%);
}

.touch-btn {
    transition: transform 0.15s ease, filter 0.15s ease;
}

.touch-btn:active {
    transform: scale(0.97);
}