/* ══════════════════════════════════════════════════
   MojNote Landing — Design Tokens
   برگرفته و منطبق با frontend/src/assets/variables.css
   تا لندینگ‌پیج دقیقاً همون هویت بصری اپ اصلی رو داشته باشه.
   ══════════════════════════════════════════════════ */

:root {
  /* ─── رنگ اصلی (Accent) ─── */
  --color-accent:         #6c63ff;
  --color-accent-bg:      #f0efff;
  --color-accent-border:  #d4d0ff;
  --color-accent-hover:   #574fd6;

  /* ─── سطوح (Light Mode) ─── */
  --color-surface-bg:       #f5f4f8;
  --color-surface-card:     #ffffff;
  --color-surface-input:    #f8f8fa;
  --color-surface-hover:    #f0effe;

  /* ─── متن ─── */
  --color-text-primary:   #1a1a2e;
  --color-text-secondary: #6b7080;
  --color-text-muted:     #a0a4b0;

  /* ─── بوردر ─── */
  --color-border:         #e8e8f0;
  --color-border-strong:  #d0d0e0;

  /* ─── وضعیت‌ها ─── */
  --color-success:        #16a34a;
  --color-success-bg:     #dcfce7;
  --color-warning:        #d97706;
  --color-warning-bg:     #fef3c7;
  --color-danger:         #dc2626;
  --color-danger-bg:      #fee2e2;

  /* ─── برند لوگو (از icon.png) ─── */
  --color-brand-cyan:   #2ec4d6;
  --color-brand-cyan-2: #1fb8cc;
  --color-brand-gold:   #ffb636;
  --color-brand-gold-2: #ffc861;

  /* ─── فونت ─── */
  --font-family-fa: 'Vazirmatn', 'Tahoma', sans-serif;
  --font-family-en: 'Inter', 'Segoe UI', sans-serif;

  /* ─── شعاع گوشه‌ها ─── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  28px;

  /* ─── سایه ─── */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-menu: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-hero: 0 24px 60px rgba(108, 99, 255, 0.18);

  /* ─── لایه‌بندی ─── */
  --header-height: 68px;
}

/* ══════════════════════════════════════════════════
   تم تاریک
   ══════════════════════════════════════════════════ */
[data-theme="dark"] {
  --color-accent:         #7c75ff;
  --color-accent-bg:      #1e1b4b;
  --color-accent-border:  #312e7a;
  --color-accent-hover:   #9d98ff;

  --color-surface-bg:       #0f0f17;
  --color-surface-card:     #1e1e2a;
  --color-surface-input:    #1a1a26;
  --color-surface-hover:    #22223a;

  --color-text-primary:   #e8e8f5;
  --color-text-secondary: #9090b0;
  --color-text-muted:     #60607a;

  --color-border:         #2a2a3a;
  --color-border-strong:  #3a3a50;

  --color-success:        #4ade80;
  --color-success-bg:     #14532d;
  --color-warning:        #fbbf24;
  --color-warning-bg:     #78350f;
  --color-danger:         #f87171;
  --color-danger-bg:      #7f1d1d;

  --shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════
   بریک‌پوینت‌های ریسپانسیو (فقط مستندسازی — چون CSS custom
   property داخل @media قابل استفاده نیست، همین اعداد باید
   به‌صورت literal در style.css تکرار بشن):
     - موبایل:  max-width: 767px
     - تبلت:    768px تا 1024px
     - دسکتاپ:  بیشتر از 1024px
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   ریست و پایه
   ══════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

html[lang="fa"], html[dir="rtl"] { font-family: var(--font-family-fa); }
html[lang="en"], html[dir="ltr"] { font-family: var(--font-family-en); }

body {
  background: var(--color-surface-bg);
  color: var(--color-text-primary);
  line-height: 1.75;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  transition: background-color .2s ease, color .2s ease;
}

img, svg { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

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