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

/* RTL and Hebrew font setup */
* {
  direction: rtl;
}

[dir="rtl"] {
  text-align: right;
}

/* Design system with brand colors - All HSL format */
@layer base {
  :root {
    /* SR Holdings Group Brand Colors */
    --primary: 189 26% 33%;        /* #3F666C Teal Slate */
    --primary-foreground: 0 0% 98%;
    
    --accent: 42 60% 40%;          /* #B8943A Darker Gold for better contrast */
    --accent-foreground: 0 0% 98%; /* White text for buttons */
    
    --background: 150 38% 97%;     /* #F5FBF8 Light */
    --foreground: 198 63% 13%;     /* #0B2C36 Dark */
    
    --secondary: 203 12% 53%;      /* #7A8A91 Muted */
    --secondary-foreground: 0 0% 98%;
    
    --muted: 203 12% 85%;
    --muted-foreground: 203 15% 35%; /* Darker for better contrast */
    
    --card: 150 38% 97%;
    --card-foreground: 198 63% 13%;
    
    --border: 203 12% 85%;
    --input: 203 12% 85%;
    --ring: 189 26% 33%;
    
    /* Luxury gradients */
    --gradient-primary: linear-gradient(135deg, hsl(189 26% 33%), hsl(189 26% 43%));
    --gradient-accent: linear-gradient(135deg, hsl(42 60% 40%), hsl(42 60% 50%));
    --gradient-hero: linear-gradient(135deg, hsl(189 26% 33% / 0.95), hsl(198 63% 13% / 0.9));
    
    /* Luxury shadows */
    --shadow-luxury: 0 20px 40px -12px hsl(189 26% 33% / 0.15);
    --shadow-glow: 0 0 30px hsl(42 60% 40% / 0.3);
    
    --radius: 0.5rem;
  }

  .dark {
    --background: 198 63% 13%;
    --foreground: 150 38% 97%;
    --primary: 189 26% 43%;
    --accent: 42 60% 45%; /* Consistent with light mode but slightly lighter for dark backgrounds */
    --muted-foreground: 203 15% 65%; /* Lighter for dark backgrounds */
  }
}

@layer base {
  * {
    @apply border-border;
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
  }
}

/* Luxury animations */
@layer components {
  .fade-up {
    animation: fadeUp 0.6s ease-out forwards;
  }
  
  .float {
    animation: float 3s ease-in-out infinite;
  }
  
  .glow-hover {
    transition: all 0.3s ease;
  }
  
  .glow-hover:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
  }
  
  /* Custom Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
  --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.4);
  
  /* Micro-animations */
  --bounce-subtle: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Focus indicators for accessibility */
  .focus-ring:focus-visible,
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    @apply outline-2 outline-primary outline-offset-2 transition-all duration-200;
  }
  
  /* Better button states */
  .btn-focus:focus-visible {
    @apply ring-2 ring-primary/50 ring-offset-2 ring-offset-background;
  }
  
  /* Skip to content link */
  .skip-link {
    @apply absolute left-0 top-0 z-[9999] bg-primary text-primary-foreground px-4 py-2 -translate-y-full focus:translate-y-0 transition-transform duration-200;
  }

  /* Header Navigation Styles */
  .nav-link {
    @apply text-slate-800/90 hover:text-slate-900 text-[15px] whitespace-nowrap transition-colors duration-200 py-1 px-2 rounded;
  }
  
  .nav-link-active {
    @apply text-accent font-medium;
  }
  
  .mobile-link {
    @apply block px-1 py-3 text-slate-800 hover:bg-slate-50 rounded transition-colors border-b border-slate-100/60 last:border-b-0;
  }
  
  .btn-cta {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-200 shadow-sm whitespace-nowrap font-semibold text-sm;
  }

  /* Enhanced Animation Utilities */
  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-luxury;
  }

  .hover-glow {
    @apply transition-all duration-300 hover:shadow-glow;
  }

  .hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
  }

  .hover-tilt {
    @apply transition-transform duration-300 hover:rotate-1;
  }

  .stagger-1 { animation-delay: 0.1s; }
  .stagger-2 { animation-delay: 0.2s; }
  .stagger-3 { animation-delay: 0.3s; }
  .stagger-4 { animation-delay: 0.4s; }
  .stagger-5 { animation-delay: 0.5s; }
  .stagger-6 { animation-delay: 0.6s; }

  .gradient-animate {
    background-size: 400% 400%;
    animation: gradient-shift 6s ease-in-out infinite;
  }

  .text-shimmer {
    background: linear-gradient(
      90deg,
      hsl(var(--foreground)) 25%,
      hsl(var(--primary)) 50%,
      hsl(var(--foreground)) 75%
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease-in-out infinite;
  }
}

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

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