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

:root {
  --bg:         #F0F5FA;
  --bg-deep:    #E4ECF4;
  --bg-card:    #FFFFFF;
  --bg-hover:   #F5F9FC;
  --sidebar:    #1B2E45;
  --topbar:     #FFFFFF;
  --border:     rgba(0,0,0,0.08);
  --border-s:   rgba(0,0,0,0.05);
  --accent:     #2563EB;
  --accent-dim: rgba(37,99,235,0.10);
  --accent-gl:  rgba(37,99,235,0.20);
  --text:       #0F1E2E;
  --text-2:     #4A6A8A;
  --text-3:     #8AA4BE;
  --hot:        #EF4444;
  --hot-dim:    rgba(239,68,68,0.08);
  --warm:       #D97706;
  --warm-dim:   rgba(217,119,6,0.09);
  --cold:       #94A3B8;
  --blue:       #3B82F6;
  --blue-dim:   rgba(59,130,246,0.09);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,30,46,0.12); border-radius: 99px; }

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }

  .animate-slideDown {
    animation: slideDown 0.2s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
    }
    to {
      opacity: 1;
      max-height: 500px;
    }
  }
}

@layer components {
  /* Lead score tier left-border accents */
  .tier-hot  { border-left: 3px solid #EF4444; }
  .tier-warm { border-left: 3px solid #D97706; }
  .tier-cold { border-left: 3px solid #94A3B8; }
  .tier-none { border-left: 3px solid transparent; }

  emoji-picker {
    --background: white;
    --border-color: rgba(0,0,0,0.08);
    --indicator-color: #2563EB;
    --input-border-color: rgba(0,0,0,0.08);
    --input-font-color: #0F1E2E;
    --input-placeholder-color: #8AA4BE;
    --outline-color: #2563EB;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(15,30,46,0.12);
  }
}