@import "tailwindcss";
@import "./variable.css";

@config "../tailwind.config.js";


@layer base {
  html {
    font-family: "Vazirmatn", Tahoma, sans-serif;
  }
  body {
    @apply bg-paper text-ink antialiased;
  }
  ::selection {
    @apply bg-brand-soft text-brand-dark;
  }
  [x-cloak] {
    display: none !important;
  }
  /* visible keyboard focus everywhere */
  :focus-visible {
    outline: 2px solid theme("colors.brand.DEFAULT");
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@layer components {
  .nav-link {
    @apply relative py-2 text-sm font-medium text-ink-soft transition-colors hover:text-ink;
  }
  .nav-link.is-active {
    @apply text-ink;
  }
  .nav-link.is-active::after {
    content: "";
    @apply absolute inset-x-0 -bottom-[1px] h-[2px] rounded-full bg-brand;
  }
  .side-link {
    @apply flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-ink-soft transition-colors hover:bg-surface-muted hover:text-ink;
  }
  .side-link.is-active {
    @apply bg-brand-soft text-brand-dark;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-card transition-colors hover:bg-brand-dark active:bg-brand-dark disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-surface px-5 py-2.5 text-sm font-semibold text-ink transition-colors hover:bg-surface-muted;
  }
  .field {
    @apply w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm text-ink placeholder:text-ink-faint transition-colors focus:border-brand focus:outline-none;
  }
  .card {
    @apply rounded-xl2 border border-border bg-surface shadow-card;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}