/* Modern Custom Styles for AI4AH Conference */

:root {
    --brand-navy: #071B3A;
    --brand-blue: #041643;
    --brand-light-blue: #123F91;
    --brand-green: #008C63;
    --brand-yellow: #D7A928;
    --brand-red: #C62828;
    --brand-gray: #F5F7FA;
    --brand-dark: #10233F;
}

/* Typography Configuration */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1e293b;
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* Smooth Scrolling & Responsive Viewport Boundary */
html, body {
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* Custom Glassmorphism Utilities */
.glass {
    background: rgba(7, 27, 58, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-light {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Poster Graphic Depth */
.poster-card {
    box-shadow: 0 25px 50px -12px rgba(4, 22, 67, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.poster-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 30px 60px -15px rgba(0, 140, 99, 0.3), 0 0 0 1px rgba(0, 140, 99, 0.3);
}

/* Calendar & Sticky Note Custom Styling */
.sticky-note-card {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.sticky-note-yellow {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border-color: #eab308;
    color: #713f12;
}

.sticky-note-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
    color: #14532d;
}

.sticky-note-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1e3a8a;
}

.sticky-note-red {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    border-color: #f43f5e;
    color: #881337;
}

/* Alpine.js cloak utility */
[x-cloak] { 
    display: none !important; 
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 140, 99, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 140, 99, 0.6);
}

/* Custom Background Patterns */
.bg-grid-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

.bg-dot-light {
    background-image: radial-gradient(rgba(4, 22, 67, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Dark Mode Background Overrides */
.dark body {
    background-color: #071b3a;
    color: #f8fafc;
}

.dark .bg-white {
    background-color: #0b172e !important;
    color: #f8fafc;
}

.dark .bg-brand-gray {
    background-color: #050d1d !important;
}

.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .text-gray-600,
.dark .text-gray-500 {
    color: #94a3b8 !important;
}

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modal Animation Keyframes */
@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal {
    animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}