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

@layer base {
  :root {
    --primary: #165DFF;
    --secondary: #0052CC;
    --light: #E8F3FF;
    --dark: #1D2129;
  }
}

@layer utilities {
  .content-auto { content-visibility: auto; }

  .nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s ease;
  }
  .nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,82,204,0.08);
  }

  .logo-hover {
    filter: grayscale(100%);
    transition: all 0.3s;
  }
  .logo-hover:hover {
    filter: grayscale(0%);
  }

  .fade-in {
    animation: fadeIn 0.5s ease forwards;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}