@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary: #0F172A; /* Navy Blue */
  --color-secondary: #2563EB; /* Blue */
  --color-accent: #06B6D4; /* Cyan */
  --color-success: #22C55E; /* Green */
  --color-warning: #F59E0B; /* Orange */
  --color-danger: #EF4444; /* Red */
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-text: #1E293B;
  --color-text-light: #64748B;
}

[data-theme="dark"] {
  --color-bg: #0B0F19; /* Deeper Navy for Dark Mode */
  --color-surface: #131B2C;
  --color-text: #F8FAFC;
  --color-text-light: #94A3B8;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .glass {
  background: rgba(19, 27, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
  100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

.pulse-active {
  animation: pulse-ring 2s infinite;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Parking Slot Specific */
.slot-empty { background-color: var(--color-success); border-color: rgba(34, 197, 94, 0.5); }
.slot-occupied { background-color: var(--color-danger); border-color: rgba(239, 68, 68, 0.5); }
.slot-process { background-color: var(--color-warning); border-color: rgba(245, 158, 11, 0.5); }
.slot-unavailable { background-color: var(--color-text-light); border-color: rgba(100, 116, 139, 0.5); }

/* SVG Path Animation for Routing */
.route-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 3s forwards linear;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

.vehicle-marker {
  offset-path: path("M 0 0 L 100 100"); /* Will be updated dynamically via JS */
  animation: moveVehicle 3s forwards linear;
}

@keyframes moveVehicle {
  100% { offset-distance: 100%; }
}