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

@layer base {
  :root {
    --background: 48 100% 99%;
    --foreground: 163 64% 13%;
    --card: 0 0% 100%;
    --card-foreground: 163 64% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 163 64% 13%;
    --primary: 158 72% 22%;
    --primary-foreground: 46 100% 95%;
    --secondary: 43 57% 54%;
    --secondary-foreground: 161 72% 12%;
    --muted: 47 65% 93%;
    --muted-foreground: 160 14% 38%;
    --accent: 44 72% 88%;
    --accent-foreground: 161 72% 12%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 43 39% 82%;
    --input: 43 39% 82%;
    --ring: 43 57% 54%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 160 45% 8%;
    --foreground: 48 100% 96%;
    --card: 160 40% 11%;
    --card-foreground: 48 100% 96%;
    --popover: 160 40% 11%;
    --popover-foreground: 48 100% 96%;
    --primary: 45 64% 58%;
    --primary-foreground: 161 72% 10%;
    --secondary: 158 55% 18%;
    --secondary-foreground: 48 100% 96%;
    --muted: 160 31% 16%;
    --muted-foreground: 48 24% 76%;
    --accent: 158 42% 19%;
    --accent-foreground: 48 100% 96%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 159 30% 24%;
    --input: 159 30% 24%;
    --ring: 45 64% 58%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "kern";
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  input,
  select,
  textarea,
  button {
    font: inherit;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  .islamic-pattern {
    background-image:
      radial-gradient(circle at 1px 1px, rgba(201, 162, 74, 0.18) 1px, transparent 0),
      linear-gradient(135deg, rgba(15, 95, 67, 0.06), rgba(201, 162, 74, 0.08));
    background-size: 28px 28px, auto;
  }

  .mobile-section {
    @apply px-4 py-10 sm:px-6 sm:py-12 lg:px-8;
  }

  .touch-card {
    @apply min-w-0 break-words;
  }
}