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

@layer base {
  :root {
    /* SafarHub Design System */
    --primary: 174 84% 27%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 98%;
    --secondary-foreground: 222 47% 11%;

    --accent: 44 74% 47%;
    --accent-foreground: 0 0% 100%;

    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 174 84% 27%;

    --radius: 0.75rem;
  }

  .dark {
    --primary: 174 84% 35%;
    --primary-foreground: 0 0% 100%;

    --secondary: 222 47% 11%;
    --secondary-foreground: 210 40% 98%;

    --accent: 44 74% 47%;
    --accent-foreground: 0 0% 100%;

    --background: 222 47% 11%;
    --foreground: 210 40% 98%;

    --card: 222 47% 15%;
    --card-foreground: 210 40% 98%;

    --popover: 222 47% 15%;
    --popover-foreground: 210 40% 98%;

    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;

    --border: 217 33% 25%;
    --input: 217 33% 25%;
    --ring: 174 84% 35%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Gradient text utility */
.gradient-text {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent;
}

/* Islamic pattern background */
.islamic-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230F766E' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Glass morphism card */
.glass-card {
  @apply bg-white/80 backdrop-blur-lg border border-white/20 shadow-xl;
}

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

/* Focus visible styles */
.focus-ring {
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
}

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }