@import "tailwindcss";
@config "../tailwind.config.js";

@layer base {
  body {
    background-color: #0B0E14;
    background-image: radial-gradient(circle at top right, #131722 0%, #0B0E14 50%),
                      radial-gradient(circle at bottom left, #131722 0%, #0B0E14 50%);
    background-attachment: fixed;
    color: #e1e2eb;
    min-height: 100vh;
  }
  
  /* Subtle global background glow */
  body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(circle at 15% 50%, rgba(2, 150, 118, 0.05), transparent 50%),
                  radial-gradient(circle at 85% 30%, rgba(9, 137, 177, 0.05), transparent 50%);
      z-index: -1;
      pointer-events: none;
  }
}

@layer components {
  .glass-panel {
      background-color: rgba(19, 23, 34, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .glass-input {
      background-color: rgba(19, 23, 34, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .glass-input:focus {
      border-color: #029676;
      outline: none;
      box-shadow: 0 0 10px rgba(2, 150, 118, 0.2);
  }

  .btn-primary {
      background-color: #029676;
      color: white;
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .btn-primary:hover {
      box-shadow: 0 0 15px rgba(2, 150, 118, 0.4);
      transform: scale(1.02);
  }

  .route-gradient {
      background: linear-gradient(to bottom, #029676, #0989B1);
      width: 4px;
      border-radius: 2px;
  }
  
  .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .material-symbols-outlined[data-weight="fill"] {
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
}

@layer utilities {
  /* Hide scrollbar for clean UI but allow scroll */
  ::-webkit-scrollbar {
      width: 6px;
  }
  ::-webkit-scrollbar-track {
      background: transparent;
  }
  ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.2);
  }
}