client/src/index.css

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

@import "tailwindcss";

@theme {
  --font-sans: 'Cairo', 'Inter', sans-serif;
  --font-display: 'Sora', sans-serif;

  --color-brand-50: #EFF6FF;
  --color-brand-100: #DBEAFE;
  --color-brand-500: #2563EB;
  --color-brand-600: #1D4ED8;
  --color-brand-700: #1E40AF;
  --color-brand-900: #1E3A5F;

  --color-accent-500: #7C3AED;
  --color-accent-600: #6D28D9;

  --color-dark-800: #0F172A;
  --color-dark-900: #020617;

  --animate-fade-in: fadeIn 0.3s ease-in-out;
  --animate-fade: fade 1s ease-in-out;
  --animate-slide-up: slideUp 0.4s ease-out;
  --animate-slide: slide 1s ease-out;
  --animate-float: float 6s ease-in-out infinite;
  --animate-pulse: pulse 2s ease-in-out infinite;

  @keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
  }
  @keyframes fade {
    0% { opacity: 0.6 }
    50% { opacity: 1 }
    100% { opacity: 0.6 }
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px) }
    to { opacity: 1; transform: translateY(0) }
  }
  @keyframes slide {
    0% { transform: translateX(0) }
    50% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-10px) }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1) }
    50% { transform: scale(1.05) }
  }
}

html {
  direction: rtl;
}

body {
  font-family: var(--font-sans);
  color: #0F172A;
  background: #F8FAFC;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}