@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap");
@import "tailwindcss";

@theme {
  --font-sans: "Vazirmatn", sans-serif;
}

@layer base {
  :root {
    --bg: #07060a;
    --surface: #100d16;
    --surface-2: #15101d;
    --surface-hover: #1a1423;
    --accent: #9b5cff;
    --accent-strong: #7c3aed;
    --accent-soft: #c4a1ff;
    --text-main: #f8f7fb;
    --text-muted: #a9a3b4;
    --border: rgba(255,255,255,.08);
    --border-purple: rgba(155,92,255,.20);
    --border-hover: rgba(155,92,255,.42);
    --font-vazir: "Vazirmatn", sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-vazir);
    scroll-behavior: smooth;
    background: var(--bg);
  }

  body, button, input, textarea, select {
    font-family: var(--font-vazir);
  }

  body {
    background:
      radial-gradient(circle at 85% 0%, rgba(124,58,237,.10), transparent 30%),
      radial-gradient(circle at 10% 25%, rgba(155,92,255,.055), transparent 28%),
      var(--bg);
    color: var(--text-main);
    font-feature-settings: "ss01", "ss02", "cv01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .font-sans, .font-vazir {
    font-family: var(--font-vazir) !important;
  }

  ::selection {
    background: rgba(155,92,255,.35);
    color: #fff;
  }

  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track { background: #07060a; }
  ::-webkit-scrollbar-thumb { background: #2a2038; border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
}

/* ZanaShop premium design system */
.bento-card {
  background: linear-gradient(145deg, rgba(20,16,28,.96), rgba(12,10,16,.98));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  background: linear-gradient(145deg, rgba(25,19,35,.98), rgba(13,10,18,.99));
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 28px rgba(124,58,237,.07);
}

.bento-hero-main {
  background:
    radial-gradient(circle at 80% 20%, rgba(155,92,255,.14), transparent 28%),
    linear-gradient(145deg, #17121f 0%, #0b0910 72%);
  border: 1px solid rgba(155,92,255,.18);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.bento-hero-char {
  background: linear-gradient(145deg, #211637 0%, #0c0911 100%);
  border: 1px solid rgba(155,92,255,.18);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.icon-box {
  width: 42px; height: 42px;
  background: rgba(155,92,255,.08);
  border: 1px solid rgba(155,92,255,.16);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}

.item-tag {
  font-size: 11px;
  color: var(--accent-soft);
  font-weight: 700;
  letter-spacing: 0;
}

.ping-badge {
  background: rgba(34,197,94,.08);
  color: #86efac;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(74,222,128,.15);
  backdrop-filter: blur(12px);
}

.glow-accent { box-shadow: 0 0 26px rgba(155,92,255,.24); }
.glow-accent-lg { box-shadow: 0 0 55px rgba(155,92,255,.18); }

.text-gradient-neon {
  background: linear-gradient(100deg, #ffffff 5%, #c4a1ff 48%, #9254ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #fff 25%, #c4a1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Make common small UI text less cramped in Persian */
.text-\[9px\] { font-size: 10px !important; line-height: 1.6 !important; }
.text-\[10px\] { font-size: 11px !important; line-height: 1.65 !important; }
.text-\[11px\] { font-size: 12px !important; line-height: 1.7 !important; }

/* Premium controls */
button, input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}

button {
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

input::placeholder, textarea::placeholder {
  opacity: .72;
}

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