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

@layer base {
  :root {
    --background: 180 20% 97%;
    --foreground: 170 15% 15%;
    --card: 180 20% 97%;
    --card-foreground: 170 15% 15%;
    --popover: 180 20% 97%;
    --popover-foreground: 170 15% 15%;
    --primary: 170 25% 35%; /* Original teal brand color */
    --primary-foreground: 180 20% 97%;
    --secondary: 170 35% 60%;
    --secondary-foreground: 180 20% 97%;
    --muted: 170 20% 96%;
    --muted-foreground: 170 15% 35%;
    --accent: 170 35% 60%;
    --accent-foreground: 180 20% 97%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 180 20% 97%;
    --border: 170 15% 85%;
    --input: 170 15% 85%;
    --ring: 170 25% 35%;
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased font-primary;
  }
  
  /* Arabic text styling */
  [dir="rtl"] body {
    @apply font-arabic;
  }
  
  /* Heading fonts */
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
  
  /* Improve focus styles for better keyboard navigation */
  :focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
  }
  
  /* Focus animation for keyboard navigation */
  .focus-animation {
    @apply animate-focus-ring;
  }
  
  /* Ensure skip links are visible when focused */
  .skip-link {
    @apply sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-primary focus:ring-2 focus:ring-primary;
  }
  
  /* Brand heading styling with original teal color */
  h1, h2, h3, h4, h5, h6 {
    @apply text-[#7BA69A] font-bold;
  }
}

/* Original Mnzzely brand colors */
.text-mnz-primary {
  color: #7BA69A; /* Original teal brand color */
}

.bg-mnz-primary {
  background-color: #7BA69A; /* Original teal brand color */
}

.hover\:bg-mnz-primary\/90:hover {
  background-color: rgba(123, 166, 154, 0.9);
}

.btn-high-contrast {
  @apply bg-[#7BA69A] text-white font-semibold;
}

@layer utilities {
  .glass-card {
    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-lg;
  }
  
  .text-balance {
    text-wrap: balance;
  }
  
  /* High contrast utilities */
  .high-contrast-text {
    @apply text-foreground font-medium;
  }
  
  .high-contrast-border {
    @apply border-2 border-current;
  }
  
  /* Hover effect utilities */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
  }
  
  .hover-grow {
    @apply transition-transform duration-300 hover:scale-105;
  }
  
  .hover-shadow {
    @apply transition-shadow duration-300 hover:shadow-md;
  }
  
  /* Click/press effects */
  .press-effect {
    @apply active:scale-95 transition-transform duration-75;
  }
  
  /* Animated border utilities */
  .border-pulse {
    @apply animate-[pulse_2s_ease-in-out_infinite];
  }
  
  /* Focus indicator animation */
  .focus-reveal {
    @apply transition-all duration-200;
  }
  
  .focus-reveal:focus-within .focus-reveal-target {
    @apply opacity-100 translate-y-0;
  }
  
  .focus-reveal-target {
    @apply opacity-0 translate-y-1 transition-all duration-200;
  }
  
  /* Text reveal animation */
  .text-reveal {
    @apply overflow-hidden;
  }
  
  .text-reveal > * {
    @apply animate-fade-up;
  }
}

/* RTL Support */
[dir="rtl"] {
  .navigation-items {
    @apply flex-row-reverse;
  }
  
  .button-icon {
    @apply ml-0 mr-2;
  }
  
  .dropdown-menu {
    @apply right-auto left-0;
  }
  
  .form-label {
    @apply text-right;
  }
  
  .input-group {
    @apply flex-row-reverse;
  }
  
  .card-content {
    @apply text-right;
  }
}

/* Interactive elements */
button, 
a[role="button"],
.interactive {
  @apply transition-all duration-200;
}

/* Card hover effects */
.card-hover {
  @apply transition-all duration-300 hover:shadow-md hover:translate-y-[-2px];
}

/* Interactive list items */
.list-item-interactive {
  @apply transition-colors duration-200 hover:bg-muted rounded-md;
}

/* Loading state styles */
.loading-skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

/* Form element focus effects */
input:focus, 
textarea:focus,
select:focus {
  @apply transition-shadow duration-200;
}