/* KalamehWeb Font - Will be loaded via WordPress inline CSS */

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

@layer base {
  :root {
    /* Dark theme - slate-950 background */
    --background: 222 47% 4%; /* #0f172a equivalent */
    --foreground: 210 40% 98%;

    /* Cards - slate-800 equivalent */
    --card: 217 33% 17.5%; /* #1e293b equivalent */
    --card-foreground: 210 40% 98%;

    --popover: 217 33% 17.5%;
    --popover-foreground: 210 40% 98%;

    --primary: 199 89% 48%;
    --primary-foreground: 222 47% 11%;

    --secondary: 217 33% 22%;
    --secondary-foreground: 210 40% 98%;

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

    --accent: 158 64% 52%;
    --accent-foreground: 222 47% 11%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 217 33% 28%;
    --input: 215 32% 22%; /* #26344a */
    --ring: 199 89% 48%;

    --radius: 0.75rem;

    --success: 158 64% 52%;
    --warning: 38 92% 50%;
    --info: 199 89% 48%;

    --sidebar-background: 222 47% 4%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 199 89% 48%;
    --sidebar-primary-foreground: 222 47% 11%;
    --sidebar-accent: 217 33% 22%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 217 33% 28%;
    --sidebar-ring: 199 89% 48%;
  }
}

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

  html {
    direction: rtl;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'KalamehWeb', 'Tahoma', 'Arial', sans-serif !important;
  }
  
  * {
    font-family: 'KalamehWeb', 'Tahoma', 'Arial', sans-serif !important;
  }
}

@layer utilities {
  .gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(199 89% 38%) 100%);
  }

  .gradient-card {
    background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(217 33% 14%) 100%);
  }

  .glow-primary {
    box-shadow: 0 0 40px hsl(var(--primary) / 0.3);
  }

  .glass {
    backdrop-filter: blur(12px);
    background: hsl(var(--card) / 0.8);
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

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