/* Inside Eko - Afro-Executive Modernist Theme Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Syne:wght@500;600;700;800&display=swap');

:root {
  --primary: #093C16;
  --primary-dark: #05240D;
  --primary-light: #0E5822;
  --primary-container: #093C16;
  --on-primary: #ffffff;
  
  --accent: #54E078;
  --accent-hover: #38C95D;
  --accent-soft: #E6F9EC;
  --primary-fixed: #54E078;
  --primary-fixed-dim: #38C95D;
  --on-primary-fixed: #093C16;
  
  --secondary: #D97706;
  --secondary-dark: #B45309;
  --secondary-container: #FEF3C7;
  --on-secondary: #ffffff;
  --secondary-fixed: #FFDCC3;
  
  --tertiary: #0D1F13;
  --surface: #FAFCFA;
  --surface-low: #F0F7F2;
  --surface-card: #FFFFFF;
  --surface-tint: #093C16;
  
  --on-surface: #0D1F13;
  --on-surface-variant: #384D3F;
  --outline: #6E8576;
  --outline-variant: #D8E5DC;
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--surface);
  color: var(--on-surface);
}

.font-syne {
  font-family: 'Syne', sans-serif;
}

.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f0f7f2;
}
::-webkit-scrollbar-thumb {
  background: #093C16;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #54E078;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Glassmorphism & Elevation */
.glass-header {
  background: rgba(250, 252, 250, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-dark {
  background: rgba(7, 21, 12, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Shadow tokens */
.shadow-executive {
  box-shadow: 0 4px 20px -4px rgba(9, 60, 22, 0.08), 0 2px 6px -1px rgba(13, 31, 19, 0.04);
}

.shadow-executive-hover {
  box-shadow: 0 16px 36px -6px rgba(9, 60, 22, 0.16), 0 4px 12px -2px rgba(13, 31, 19, 0.06);
}

.shadow-sovereign-glow {
  box-shadow: 0 0 0 3px rgba(84, 224, 120, 0.25), 0 12px 32px -4px rgba(9, 60, 22, 0.3);
}

.shadow-neon-glow {
  box-shadow: 0 0 20px rgba(84, 224, 120, 0.4);
}

/* Ticker / Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: inline-flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Radar Pulse Animation */
@keyframes radar-sweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.radar-beam {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(84, 224, 120, 0.45) 60deg, transparent 60.1deg);
  animation: radar-sweep 4s linear infinite;
}

/* Pulse Glows */
@keyframes pulse-emerald {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(84, 224, 120, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(84, 224, 120, 0);
  }
}

.pulse-emerald-badge {
  animation: pulse-emerald 2.5s infinite;
}

/* Interactive Elements & Transitions */
.interactive-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.interactive-card:hover {
  transform: translateY(-4px);
}

/* Tab & Corridor active transitions */
.tab-pill {
  transition: all 0.25s ease;
}

/* Input custom focus */
.input-executive:focus-within {
  border-color: #093C16;
  box-shadow: 0 0 0 3px rgba(84, 224, 120, 0.3);
}

/* Modal styles */
.modal-backdrop {
  background: rgba(7, 21, 12, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Animated gradient text matching logo */
.text-gradient-emerald {
  background: linear-gradient(135deg, #093C16 0%, #166A2E 40%, #54E078 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}