/* architecture: core — CSS variables | lines 1-69 from style.css */
/* ================================================
   1. ROOT & RESET
   ================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  /*
   * تم روشن لندینگ + اکسنت آبی (#60a5fa / #3b82f6)
   * تم تیره قبلی: body.landing-page.landing-theme-dark
   */
  --bg-main:        #f7faff;
  --bg-section:     #eef4fc;
  --bg-elevated:    #ffffff;
  --bg-card:        #ffffff;
  --border-color:   rgba(37, 99, 235, 0.12);
  --border-strong:  rgba(37, 99, 235, 0.22);

  /* اکسنت — آبی بخش‌ها؛ solid کمی عمیق‌تر برای خوانایی روی سفید */
  --accent:              #3b82f6;
  --accent-hover:        #2563eb;
  --accent-pressed:      #1d4ed8;
  --accent-solid:        #3b82f6;
  --accent-solid-hover:  #2563eb;
  --accent-muted:        rgba(96, 165, 250, 0.12);
  --accent-border:       rgba(96, 165, 250, 0.32);
  --accent-glow:         rgba(96, 165, 250, 0.2);
  --accent-on:           #ffffff;
  --accent-gold:         var(--accent);
  --accent-gold-hover:   var(--accent-hover);

  --text-white:     #0f172a;
  --text-gray:      #475569;
  --text-gray-light:#334155;
  --text-muted:     #64748b;

  /* معنایی — هشدار زرد می‌ماند؛ اکسنت آبی جداست */
  --success:        #5ecf8a;
  --success-muted:  rgba(94, 207, 138, 0.12);
  --warning:        #e5b84a;
  --warning-muted:  rgba(229, 184, 74, 0.12);
  --danger:         #f08080;
  --danger-muted:   rgba(240, 128, 128, 0.12);
  --info:           #6babf0;
  --info-muted:     rgba(107, 171, 240, 0.12);

  --radius-sm:      8px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-xl:      32px;
  --transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ================================================
     مقیاس سیال (mobile-first)
     ------------------------------------------------
     مقادیر با clamp() بین موبایل و دسکتاپ حرکت می‌کنند،
     پس نیازی به بازنویسی آن‌ها داخل media query نیست.
     الگو: clamp(<موبایل>, <رشد نسبت به عرض>, <دسکتاپ>)
     ================================================ */
  --space-section:     clamp(36px, 6.5vw, 104px);
  --space-section-alt: clamp(24px, 5.5vw, 80px);
  --space-header:      clamp(18px, 3.6vw, 56px);
  --space-stack:       clamp(10px, 1.5vw, 22px);
  --space-card-gap:    clamp(8px, 1.8vw, 28px);

  /* حاشیه افقی امن — شامل notch آیفون در حالت افقی */
  --gutter:            clamp(16px, 4.2vw, 28px);
  --gutter-safe:       max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));

  --content-max:       1280px;
  --content-max-hero:  1320px;
  --card-radius:       var(--radius-lg);

  /* ارتفاع ناوبر — فشرده روی موبایل، بازتر از ۱۰۲۴px */
  --nav-height:        52px;

  /* حداقل اندازه هدف لمسی طبق راهنمای دسترس‌پذیری */
  --tap-target:        44px;

  /* تایپوگرافی سیال — بدون media query */
  --fs-display:  clamp(2rem, 1.35rem + 2.8vw, 3.4rem);
  --fs-h2:       clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  --fs-h3:       clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
  --fs-lead:     clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
  --fs-body:     clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --fs-sm:       clamp(0.78rem, 0.75rem + 0.15vw, 0.88rem);

  --scrollbar-size:    5px;
  --scrollbar-thumb:   rgba(59, 130, 246, 0.32);
  --scrollbar-thumb-hover: rgba(37, 99, 235, 0.42);

  --nav-bg: rgba(255, 255, 255, 0.78);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.96);
  --nav-border: rgba(59, 130, 246, 0.1);
  --nav-shadow-scrolled: 0 10px 28px -18px rgba(15, 23, 42, 0.16);
  --overlay-bg: rgba(15, 23, 42, 0.32);
  --drawer-glow: radial-gradient(ellipse 80% 40% at 100% 0%, rgba(96, 165, 250, 0.16) 0%, transparent 60%);
  --drawer-fill: linear-gradient(170deg, #ffffff 0%, #f4f8fd 55%, #eaf2fb 100%);
  --drawer-shadow: -20px 0 48px rgba(15, 23, 42, 0.1);
  --logo-blend: multiply;
  --logo-filter: invert(1) hue-rotate(180deg);
  --glass-fill: #ffffff;
  --glass-fill-hover: #f4f8ff;
  --glass-fill-muted: rgba(255, 255, 255, 0.72);
  --surface-bg: #ffffff;
  --card-shadow:
    0 8px 24px -14px rgba(37, 99, 235, 0.16),
    0 2px 8px rgba(15, 23, 42, 0.04);
  --card-shadow-hover:
    0 14px 32px -14px rgba(37, 99, 235, 0.2),
    0 4px 12px rgba(15, 23, 42, 0.06);
  --plan-card-bg: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  --plan-card-bg-selected:
    linear-gradient(180deg, rgba(96, 165, 250, 0.1) 0%, transparent 32%),
    linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  --cta-band-bg:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(96, 165, 250, 0.18) 0%, transparent 65%),
    linear-gradient(165deg, #ffffff 0%, #e8f1fc 100%);
  --input-bg: #ffffff;
  --plan-drop: rgba(37, 99, 235, 0.16);
  --scrollbar-track:   transparent;
}

@media (min-width: 480px) {
  :root {
    --nav-height: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-height: 68px;
  }
}