/* Custom Styles and Design System Extensions for FasalRakshak */

:root {
  --color-primary: #00450d;
  --color-primary-container: #1b5e20;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #90d689;
  --color-secondary: #964900;
  --color-secondary-container: #fc820c;
  --color-tertiary: #003e63;
  --color-tertiary-container: #005687;
  --color-surface: #f5fced;
  --color-surface-container: #e9f0e1;
  --color-surface-container-high: #e3ebdc;
  --color-surface-container-highest: #dee5d6;
  --color-surface-container-low: #eff6e7;
  --color-surface-container-lowest: #ffffff;
  --color-on-surface: #171d14;
  --color-on-surface-variant: #41493e;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
}

/* Prevent accidental horizontal page scroll */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism */
.glass {
  background: rgba(245, 252, 237, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-dark {
  background: rgba(26, 28, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hide scrollbars while keeping scroll functionality */
.hide-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar,
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scanLaser {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes pulseBorder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(186, 26, 26, 0); }
}

@keyframes shimmerEffect {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scan {
  animation: scanLaser 2.4s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmerEffect 2s infinite;
}

/* Card Selection states */
.crop-card.selected {
  outline: 2px solid var(--color-primary);
  background-color: var(--color-surface-container-high);
}

.scan-card.selected {
  outline: 2px solid var(--color-primary);
  background-color: #eff6e7;
}

/* Safe area padding utilities for mobile */
.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.pt-safe {
  padding-top: max(16px, env(safe-area-inset-top));
}

/* Voice pulse ring */
.voice-pulse-ring {
  animation: pulseBorder 1.5s infinite;
}

/* Responsive typography clamps */
.text-responsive-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.25;
}

.text-responsive-metric {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
}