@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: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --color-gereja-biru: #1e3a5f;
    --color-gereja-biru-light: #2d5a8a;
    --color-gereja-emas: #d4af37;
}

:root {
    --color-primary: #1e3a5f;
    --color-primary-light: #2d5a8a;
    --color-primary-dark: #152a45;
    --color-secondary: #d4af37;
    --color-secondary-light: #e6c85a;
    --color-surface: #ffffff;
    --color-surface-variant: #f8fafc;
    --color-on-primary: #ffffff;
    --color-on-secondary: #1e3a5f;
}

@layer base {
    html {
        font-size: 16px;
        scroll-behavior: smooth;
    }
    body {
        @apply text-gray-700 leading-relaxed antialiased;
        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-bold tracking-tight text-gray-900;
    }
}

@layer utilities {
    /* Primary Colors */
    .bg-primary { background-color: #1e3a5f; }
    .bg-primary-light { background-color: #2d5a8a; }
    .bg-primary-dark { background-color: #152a45; }
    .text-primary { color: #1e3a5f; }
    .text-primary-light { color: #2d5a8a; }
    .border-primary { border-color: #1e3a5f; }
    
    /* Secondary/Accent Colors */
    .bg-secondary { background-color: #d4af37; }
    .bg-secondary-light { background-color: #e6c85a; }
    .text-secondary { color: #d4af37; }
    .border-secondary { border-color: #d4af37; }
    
    /* Legacy support */
    .bg-gereja-biru { background-color: #1e3a5f; }
    .bg-gereja-biru-light { background-color: #2d5a8a; }
    .bg-gereja-emas { background-color: #d4af37; }
    .text-gereja-biru { color: #1e3a5f; }
    .text-gereja-biru-light { color: #2d5a8a; }
    .text-gereja-emas { color: #d4af37; }
    .border-gereja-biru { border-color: #1e3a5f; }
    .border-gereja-emas { border-color: #d4af37; }
    
    /* Hover states */
    .hover\:bg-primary-light:hover { background-color: #2d5a8a; }
    .hover\:bg-primary-dark:hover { background-color: #152a45; }
    .hover\:bg-secondary:hover { background-color: #d4af37; }
    .hover\:bg-secondary-light:hover { background-color: #e6c85a; }
    .hover\:text-secondary:hover { color: #d4af37; }
    .hover\:bg-gereja-biru-light:hover { background-color: #2d5a8a; }
    .hover\:bg-gereja-emas:hover { background-color: #d4af37; }
    .hover\:text-gereja-emas:hover { color: #d4af37; }
}

/* Material Design Shadows */
.shadow-material-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.shadow-material-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12); }
.shadow-material-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10); }
.shadow-material-4 { box-shadow: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05); }

/* Gradient backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8a 100%);
}

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
