@theme {
    --color-custom-1: #020915;
    --color-custom-2: #8DC4FF;
    --color-custom-3: #051023;
    --color-custom-4: #007BFF;
    --color-custom-5: #F4A641;
    --color-custom-6: #979797;
    --color-custom-7: #F4A641;
    --color-custom-8: #06172C;

    --color-light-1: #1E1E1E;
    --color-light-2: #F6F8FB;
    --color-light-3: #1B2430;
    
    /* Professional Gray Colors */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* Light Theme Specific Grays */
    --color-light-bg: #F8F9FA;
    --color-light-surface: #FFFFFF;
    --color-light-border: #E9ECEF;
    --color-light-text-primary: #212529;
    --color-light-text-secondary: #6C757D;
    --color-light-text-muted: #ADB5BD;
    
    /* Dark Theme Specific Grays */
    --color-dark-bg: #0F172A;
    --color-dark-surface: #1E293B;
    --color-dark-border: #334155;
    --color-dark-text-primary: #F8FAFC;
    --color-dark-text-secondary: #CBD5E1;
    --color-dark-text-muted: #64748B;
}
@config "../../tailwind.config.js";
/* برای کروم، اج، و سافاری */
@media (min-width: 768px) {
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #007BFF30;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar
  {
    width: 7px;
    background-color: #007BFF30;
  }
  
  ::-webkit-scrollbar-thumb
  {
    background-color: #007BFF;
    border-radius: 10px;
  }
  
}
  
body {
    font-family: yekanbakh, sans-serif;
    p, h1 {
        margin: 0;
    }
}
.poppins-font {
  font-family: "Poppins", yekanbakh, sans-serif;
}
.btn-primary {
    --bs-btn-bg: #007BFF;
    font-size: 20px;
    font-weight: 500;
    border-radius: 14px;
}

.pagination.custom-pagination {
  direction: ltr;
  justify-content: center;
  gap: 8px;
  .page-item {
    display: block;
    .page-link {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      background-color: #F6F8FB;
      color: #000000;
      &:is(.dark *) {
        background-color: #05101E;
        color: white;
      }
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-family: "dana";
      padding: 0;
      border: none;
      &:hover {        
        background-color: #007BFF40;
      }
    }
    &.active {
      .page-link {
        background-color: #007BFF;
      }
    }
  }
}