@import "tailwindcss";

/*
 * سیستم طراحی زهورا
 * پالت: مشکی، سفید و خاکستری روشن — مینیمال و لوکس با فضای خالی زیاد.
 */
@theme {
  --color-ink: #0b0b0b;
  --color-ink-soft: #2a2a2a;
  --color-paper: #ffffff;
  --color-mist: #f5f5f3;
  --color-fog: #ececea;
  --color-line: #e3e3e0;
  --color-muted: #75756f;
  --color-subtle: #a3a39d;
  /** زرشکی نوار اعلان بالای سایت */
  --color-promo: #800018;
  /** قرمز دکمه‌های دعوت به اقدام (افزودن به سبد، تسویه، …) و عدد سبد خرید */
  --color-cta: #be2a32;
  --color-cta-hover: #a3222a;
  /** طلایی ستاره‌های نوار دسته‌بندی */
  --color-gold: #d9b072;

  --font-sans: var(--font-vazirmatn), system-ui, sans-serif;

  --tracking-logo: 0.32em;
  --animate-fade-in: fade-in 0.2s ease-out;
  --animate-slide-up: slide-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  --animate-promo-shine: promo-shine 7s ease-in-out infinite;
  --animate-twinkle: twinkle 3.2s ease-in-out infinite;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  /* چشمک ستاره‌های طلایی نوار دسته‌بندی */
  @keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.55; transform: scale(0.8) rotate(12deg); }
  }
  /* نوار نور که آرام از روی نوار اعلان رد می‌شود */
  @keyframes promo-shine {
    0%, 55% { transform: translateX(120%); }
    100% { transform: translateX(-120%); }
  }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }
  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-feature-settings: "ss01";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  ::selection {
    background: var(--color-ink);
    color: var(--color-paper);
  }
  :focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }
  input,
  select,
  textarea {
    font: inherit;
  }
  /* اعداد ورودی (موبایل، کد پستی) چپ‌به‌راست نمایش داده شوند */
  input[inputmode="numeric"],
  input[type="tel"] {
    direction: ltr;
    text-align: right;
  }
}

/* کلاس‌های قابل استفاده مجدد (در Tailwind v4 به‌صورت utility تعریف می‌شوند) */
@utility container-z {
  @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-10;
}
@utility btn {
  @apply inline-flex h-12 items-center justify-center gap-2 rounded-full px-6 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40;
}
/* دکمه اصلی: در فروشگاه قرمز (cta)، در پنل مدیریت مشکی (متغیر --btn-primary در قالب پنل) */
@utility btn-primary {
  @apply btn text-paper;
  background-color: var(--btn-primary, var(--color-cta));
  &:hover:not(:disabled) {
    background-color: var(--btn-primary-hover, var(--color-cta-hover));
  }
}
@utility btn-outline {
  @apply btn border border-ink bg-paper text-ink hover:bg-mist;
}
@utility btn-ghost {
  @apply btn text-ink hover:bg-mist;
}
@utility field {
  @apply h-12 w-full rounded-xl border border-line bg-paper px-4 text-sm outline-none transition-colors placeholder:text-subtle focus:border-ink;
}
@utility label {
  @apply mb-1.5 block text-xs font-medium text-ink-soft;
}
@utility chip {
  @apply inline-flex h-9 items-center gap-1.5 rounded-full border border-line px-4 text-xs whitespace-nowrap transition-colors hover:border-ink;
}
@utility chip-active {
  @apply border-ink bg-ink text-paper;
}
@utility section-title {
  @apply text-lg font-bold tracking-tight sm:text-xl;
}
@utility eyebrow {
  @apply text-[11px] font-medium tracking-[0.2em] text-muted uppercase;
}
@utility card-surface {
  @apply rounded-2xl bg-mist;
}
@utility prose-z {
  @apply space-y-4 text-sm leading-8 text-ink-soft;
  & h2 {
    @apply pt-4 text-base font-bold text-ink;
  }
  & ul {
    @apply list-disc space-y-1 ps-5;
  }
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}