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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Enhanced Professional Color Palette */
    --background: 0 0% 100%;
    --foreground: 210 22% 8%;

    --card: 0 0% 100%;
    --card-foreground: 210 22% 8%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 22% 8%;

    /* Sophisticated Blue Primary */
    --primary: 210 85% 25%;
    --primary-light: 210 75% 35%;
    --primary-dark: 210 95% 15%;
    --primary-foreground: 0 0% 98%;

    /* Professional Secondary Tones */
    --secondary: 210 30% 96%;
    --secondary-foreground: 210 22% 8%;
    --secondary-dark: 210 40% 92%;

    /* Elegant Muted Palette */
    --muted: 210 30% 96%;
    --muted-foreground: 210 15% 48%;
    --muted-dark: 210 20% 88%;

    /* Accent Colors */
    --accent: 210 30% 96%;
    --accent-foreground: 210 22% 8%;
    --accent-blue: 210 85% 25%;

    /* Status Colors */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 71% 45%;
    --warning: 38 92% 50%;

    /* Border and Input */
    --border: 210 20% 90%;
    --input: 210 20% 90%;
    --ring: 210 85% 25%;

    /* Enhanced Radius */
    --radius: 0.75rem;

    /* Gradient Variables */
    --gradient-primary: linear-gradient(135deg, hsl(210 85% 25%), hsl(210 75% 35%));
    --gradient-secondary: linear-gradient(135deg, hsl(210 30% 96%), hsl(210 40% 92%));
    --gradient-hero: linear-gradient(135deg, hsl(210 95% 15%) 0%, hsl(210 85% 25%) 50%, hsl(210 75% 35%) 100%);
    
    /* Shadow Variables */
    --shadow-sm: 0 1px 2px 0 hsl(210 20% 0% / 0.05);
    --shadow: 0 1px 3px 0 hsl(210 20% 0% / 0.1), 0 1px 2px -1px hsl(210 20% 0% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(210 20% 0% / 0.1), 0 2px 4px -2px hsl(210 20% 0% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(210 20% 0% / 0.1), 0 4px 6px -4px hsl(210 20% 0% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(210 20% 0% / 0.1), 0 8px 10px -6px hsl(210 20% 0% / 0.1);
    --shadow-2xl: 0 25px 50px -12px hsl(210 20% 0% / 0.25);
    --shadow-primary: 0 10px 30px -10px hsl(210 85% 25% / 0.3);

    /* Sidebar */
    --sidebar-background: 210 30% 98%;
    --sidebar-foreground: 210 22% 26%;
    --sidebar-primary: 210 85% 25%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 210 40% 95%;
    --sidebar-accent-foreground: 210 22% 8%;
    --sidebar-border: 210 20% 90%;
    --sidebar-ring: 210 85% 25%;
  }

  .dark {
    --background: 210 22% 4%;
    --foreground: 210 30% 95%;

    --card: 210 22% 6%;
    --card-foreground: 210 30% 95%;

    --popover: 210 22% 6%;
    --popover-foreground: 210 30% 95%;

    --primary: 210 75% 65%;
    --primary-light: 210 65% 75%;
    --primary-dark: 210 85% 55%;
    --primary-foreground: 210 22% 4%;

    --secondary: 210 22% 12%;
    --secondary-foreground: 210 30% 95%;
    --secondary-dark: 210 22% 8%;

    --muted: 210 22% 12%;
    --muted-foreground: 210 15% 65%;
    --muted-dark: 210 22% 16%;

    --accent: 210 22% 12%;
    --accent-foreground: 210 30% 95%;
    --accent-blue: 210 75% 65%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 210 30% 95%;

    --border: 210 22% 18%;
    --input: 210 22% 18%;
    --ring: 210 75% 65%;

    --sidebar-background: 210 22% 6%;
    --sidebar-foreground: 210 30% 85%;
    --sidebar-primary: 210 75% 65%;
    --sidebar-primary-foreground: 210 22% 4%;
    --sidebar-accent: 210 22% 12%;
    --sidebar-accent-foreground: 210 30% 95%;
    --sidebar-border: 210 22% 18%;
    --sidebar-ring: 210 75% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-inter antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-lora font-semibold tracking-tight;
  }

  .rtl {
    direction: rtl;
    text-align: right;
  }

  .ltr {
    direction: ltr;
    text-align: left;
  }

  /* Professional gradient backgrounds */
  .gradient-primary {
    background: var(--gradient-primary);
  }

  .gradient-secondary {
    background: var(--gradient-secondary);
  }

  .gradient-hero {
    background: var(--gradient-hero);
  }

  /* Enhanced shadows */
  .shadow-primary {
    box-shadow: var(--shadow-primary);
  }

  /* Glass morphism effect */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Professional animations */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-fade-in-delay {
    animation: fadeIn 0.8s ease-out 0.2s both;
  }

  /* Hover effects */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }

  /* Professional card styles */
  .card-elegant {
    @apply bg-card border border-border/50 rounded-xl shadow-md hover:shadow-lg transition-all duration-300;
  }

  .card-featured {
    @apply bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Professional scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 6px;
  border: 2px solid hsl(var(--muted));
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary-dark));
}

/* Enhanced animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}