/* Shared font, design tokens, reset and buttons from corporate/public/css/style.css.
   Page-specific header/footer/FAQ styles are supplied by modeling.css. */
/* ==========================================================================
   style.css — AYAI (RTL) Modern UI System
   نسخه پیشنهادی برای تبدیل ظاهر فعلی به UI مدرن (بدون فریم‌ورک)
   تاریخ: 2025-12-20
   ========================================================================== */

/* ------------------------------
   1) Fonts (Performance-ready)
   WOFF2 برای مرورگرهای جدید، TTF فقط به‌عنوان fallback.
   ------------------------------ */

@font-face {
  font-family: "Yekan";
  src:
    url("./Yekan.woff2") format("woff2"),
    local("Yekan");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* جلوگیری از FOIT */
}

/* ------------------------------
   2) Design Tokens (Variables)
   ------------------------------ */

:root {
  /* Container */
  --container: 1200px;

  /* Typography */
  --font-sans: "Yekan", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-0: 0.92rem;
  --fs-1: 1rem;
  --fs-2: 1.08rem;
  --fs-3: 1.18rem;
  --fs-4: 1.35rem;
  --fs-5: 1.7rem;
  --fs-6: 2.1rem;
  --fs-hero: clamp(1.8rem, 3.2vw, 3rem);
  --fs-hero-sub: clamp(1.05rem, 2.0vw, 1.6rem);

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 24px;

  /* Shadows */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, 0.12);

  /* Motion */
  --t-fast: 150ms;
  --t-med: 240ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Color (Light by default) */
  --bg: #0b0f17;               /* برای هدر/هیرو */
  --page: #f6f7fb;             /* پس‌زمینه کلی صفحات */
  --surface: #ffffff;          /* کارت‌ها */
  --surface-2: #f1f3f9;        /* سطوح ثانویه مثل FAQ */
  --border: rgba(20, 30, 55, 0.10);

  --text: #0e1628;
  --muted: rgba(14, 22, 40, 0.72);

  /* Brand */
  --primary: #3b82f6;          /* آبی */
  --primary-2: #6366f1;        /* ایندیگو */
  --accent: #22c55e;           /* سبز */
  --warning: #f59e0b;

  /* Hero text on dark */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.72);

  /* Focus ring */
  --focus: 0 0 0 4px rgba(59, 130, 246, 0.28);

  /* Gradients / Glow */
  --glow: radial-gradient(600px 280px at 70% 30%, rgba(99, 102, 241, 0.30), transparent 60%),
          radial-gradient(520px 240px at 20% 70%, rgba(59, 130, 246, 0.22), transparent 60%);
}

/* Dark mode (اختیاری): اگر خواستی همیشه Light باشد، این بخش را حذف کن */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #070a12;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-2: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.10);

    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.70);
  }
}

/* ------------------------------
   3) Base / Reset
   ------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: 1.85;
  background: var(--page);
  color: var(--text);
  direction: rtl;
  text-align: right;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

p { margin: 0 0 12px 0; }
h1, h2, h3 { margin: 0 0 12px 0; line-height: 1.25; }

@supports not selector(:focus-visible){
  :focus{ box-shadow: var(--focus); border-radius: 10px; }
}

/* حرکت کمتر برای کسانی که حساس هستند */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------
   4) Helpers
   ------------------------------ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-12) 0;
}

.section-title {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
}

.section-lead {
  color: var(--muted);
  font-size: var(--fs-2);
  max-width: 72ch;
}

/* Buttons (یکپارچه‌سازی .button و .cta-button) */
.button,
.cta-button,
.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
}

.button:hover,
.cta-button:hover,
.product .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(59, 130, 246, 0.28);
}

.button:active,
.cta-button:active,
.product .button:active {
  transform: translateY(0);
  opacity: 0.94;
}

/* دکمه ثانویه (اگر بعداً اضافه کردی) */
.button.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

.button.secondary:hover {
  background: rgba(59, 130, 246, 0.08);
}