@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #f8faf9;
  --foreground: #0a0a0a;
  --primary: #059669;
  --primary-container: #047857;
  --secondary: #D4AF37;
  --surface: #ffffff;
  --obsidian: #0A0A0A;
}

body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, .font-heading, .font-serif, .font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.text-gradient {
  background: linear-gradient(135deg, #059669, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #FFE259 0%, #FFA726 45%, #D48B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-gold {
  background: linear-gradient(135deg, #D48B00 0%, #FFA726 35%, #FFE259 70%, #E6A100 100%);
}

.text-gradient-emerald-gold {
  background: linear-gradient(135deg, #059669, #FFA726, #FFE259);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-cutout {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

@media (max-width: 768px) {
  .hero-cutout {
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  }
}

/* Market Ticker Animation */
@keyframes ticker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 35s linear infinite;
}

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

/* Seamless Continuous Marquee (Left to Right) */
@keyframes marquee-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.animate-marquee-ltr {
  display: flex;
  width: max-content;
  animation: marquee-ltr 32s linear infinite;
  will-change: transform;
}

.animate-marquee-ltr:hover,
.group:hover .animate-marquee-ltr {
  animation-play-state: paused !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f3;
}
::-webkit-scrollbar-thumb {
  background: #52525b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

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

/* Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-panel-dark {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.gold-border-glow {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.emerald-border-glow {
  box-shadow: 0 0 15px rgba(5, 150, 105, 0.2);
}