/* Custom CSS mapped from Tailwind configuration to emulate "Aurelian Institute" Design System */

:root {
  --surface: #f8f9fa;
  --primary-container: #0d1c32;
  --inverse-primary: #b9c7e4;
  --secondary-fixed: #e9c349;
  --on-surface-variant: #44474d;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f4f5;
  --surface-container-high: #e7e8e9;
  --on-primary: #ffffff;
  --secondary: #735c00;
  --outline-variant: #c5c6cd;
  --on-secondary-fixed: #241a00;
}

body {
  background-color: var(--surface);
  color: #191c1d;
  font-family: 'Open Sans', sans-serif;
  min-height: max(884px, 100dvh);
}

.bg-surface { background-color: var(--surface) !important; }
.bg-primary-container { background-color: var(--primary-container) !important; color: var(--on-primary); }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-container-high { background-color: var(--surface-container-high) !important; }
.bg-secondary { background-color: var(--secondary) !important; color: var(--on-primary); }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }

.text-primary-container { color: var(--primary-container) !important; }
.text-secondary-fixed { color: var(--secondary-fixed) !important; }
.text-on-primary { color: var(--on-primary) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-on-secondary-fixed { color: var(--on-secondary-fixed) !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-300 { color: #fcd34d !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-500 { color: #64748b !important; }

/* Typography */
.font-headline { font-family: 'Poppins', sans-serif; }
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-label { font-family: 'Work Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; }
.font-body { font-family: 'Open Sans', sans-serif; }

/* Effects */
.glass-nav {
  background: rgba(13, 28, 50, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

.gold-gradient {
  background: linear-gradient(135deg, #735c00 0%, #e9c349 100%);
  color: var(--on-secondary-fixed) !important;
  border: none;
}

.gold-gradient:hover {
  opacity: 0.9;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
}

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

.transition-all { transition: all 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-700 { transition-duration: 700ms; }

.hover-scale { transition: transform 0.3s ease; }
.hover-scale:hover { transform: scale(1.05); }

/* Specific Overrides missing in BS5 */
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.leading-tight { line-height: 1.25; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }

.border-outline-variant { border-color: rgba(197, 198, 205, 0.3) !important; }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.mix-blend-overlay { mix-blend-mode: overlay; }
.opacity-30 { opacity: 0.3; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* Element specific */
.speaker-img {
    aspect-ratio: 3/4;
    object-fit: cover;
}
.speaker-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.committee-img-container {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 4px solid #fff;
    background-color: #e2e8f0;
}
.committee-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.map-grayscale {
    filter: grayscale(100%);
    opacity: 0.9;
    transition: all 0.7s ease;
}
.map-grayscale:hover {
    filter: grayscale(0%);
    opacity: 1;
}