/* ============================================================
   مرحله ۱۴.۰۱ + ۱۴.۱۰ — توکن‌های برند برای Mini App
   این فایل باید دقیقاً با brand.php هم‌خوان بمونه. اگه اونجا رنگی عوض شد، اینجا هم عوض بشه.
   (اسکریپت test-graphics.php این هم‌خوانی رو خودکار چک می‌کنه.)
   ============================================================ */

:root {
  /* --- رنگ‌های معنایی: در هر دو تم ثابت می‌مونن --- */
  --gold: #D4A64A;
  --success: #1D9E75;
  --success-soft: #146B50;
  --danger: #E5484D;
  --warning: #E89C2A;

  /* --- بج سطح ربات (۱۴.۰۳) --- */
  --tier-simple: #8B8D98;
  --tier-pro: #3B82F6;
  --tier-plus: #8B5CF6;
  --tier-plusplus: #D4A64A;
  --tier-personal: #2DD4BF;

  /* مدال‌های جدول برترین‌ها (v2.2.1) */
  --medal-silver: #C0C6D0;
  --medal-bronze: #CD7F32;

  /* --- شعاع گوشه و فاصله‌ها (ثابت در کل اپ) --- */
  --radius-card: 16px;
  --radius-pill: 999px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* --- تم تاریک (پیش‌فرض) --- */
  --bg: #0B0E11;
  --surface: #14181D;
  --text: #F2F2F3;
  --muted: #8B8D98;
  --divider: #22262B;
  --gold-text: var(--gold); /* روی تیره، طلایی اصلی کنتراست کافی داره */
}

/* ۱۴.۱۰ — تم روشن. تلگرام کلاس/متغیر تم رو می‌ده؛ هر دو مسیر پوشش داده شدن:
   ۱) اگه اپ صریحاً data-theme="light" بذاره، ۲) اگه سیستم‌عامل روشن باشه و تم صریح ست نشده باشه. */
:root[data-theme="light"] {
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --text: #16181C;
  --muted: #5E616B;
  --divider: #E3E4E8;
  /* ⚠️ چک‌لیست ۱۴.۱۰: طلایی اصلی روی پس‌زمینه‌ی سفید کنتراست کافی نداره (حدود ۲:۱).
     برای متن، نسخه‌ی تیره‌تر استفاده می‌شه تا از حد WCAG AA رد بشه. */
  --gold-text: #8A661C;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F7F7F8;
    --surface: #FFFFFF;
    --text: #16181C;
    --muted: #5E616B;
    --divider: #E3E4E8;
    --gold-text: #8A661C;
  }
}

/* ============================================================
   پایه
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* ۱۴.۰۲ — پشته‌ی فونت بر اساس زبان. صفحه باید lang و dir رو روی <html> ست کنه. */
html[lang="fa"], html[lang="ar"] { --font-stack: "Vazirmatn", Tahoma, sans-serif; }
html[lang="he"] { --font-stack: "Noto Sans Hebrew", Arial, sans-serif; }
html[lang="zh"] { --font-stack: "Noto Sans SC", sans-serif; }
html[lang="ko"] { --font-stack: "Noto Sans KR", sans-serif; }
html[lang="hi"] { --font-stack: "Noto Sans Devanagari", sans-serif; }

/* ============================================================
   ۱۴.۱۰ — راست‌به‌چپ
   رویکرد: به‌جای نوشتن یه شیت جدا برای RTL، از ویژگی‌های منطقی CSS استفاده می‌شه
   (margin-inline-start به‌جای margin-left و…) تا مرورگر خودش آینه کنه.
   فقط چیزهایی که مرورگر خودکار آینه نمی‌کنه، دستی مدیریت می‌شن (پایین).
   ============================================================ */
[dir="rtl"] { direction: rtl; }

/* فلش‌ها باید آینه بشن؛ آیکون‌های غیرجهت‌دار (کیف‌پول، ربات) نباید — این تفاوت دقیقاً همون
   چیزیه که چک‌لیست ۱۴.۱۰ گفته باید برای فارسی و عربی جداگانه چک بشه. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* اعداد و مبالغ مالی همیشه چپ‌به‌راست می‌مونن، حتی وسط متن راست‌به‌چپ.
   بدون این، الگوریتم Bidi ممکنه «1,250,000-» رو جابه‌جا نشون بده. (قانون مرحله ۳) */
.num, .amount, .price { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ============================================================
   کامپوننت‌ها
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--gap-md);
}

/* حاشیه‌ی رنگی سطح ربات — همیشه سمت شروعِ خط (چپ در LTR، راست در RTL) */
.card--tier { border-inline-start: 3px solid var(--tier-color, var(--tier-simple)); }
.card--simple   { --tier-color: var(--tier-simple); }
.card--pro      { --tier-color: var(--tier-pro); }
.card--plus     { --tier-color: var(--tier-plus); }
.card--plusplus { --tier-color: var(--tier-plusplus); }
.card--personal { --tier-color: var(--tier-personal); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--tier-color, var(--tier-simple)) 18%, transparent);
  color: var(--tier-color, var(--tier-simple));
}

/* عدد بزرگ (موجودی، قیمت) */
.hero-number {
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.value-up   { color: var(--success); }
.value-down { color: var(--danger); }
.muted      { color: var(--muted); }
.gold       { color: var(--gold-text); }

.divider { height: 1px; background: var(--divider); border: 0; margin: var(--gap-md) 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: 46px;          /* هدف لمسی راحت روی موبایل */
  padding: 0 var(--gap-md);
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
  /* ۱۴.۱۲ — زبان‌های طولانی (آلمانی/هلندی) نباید دکمه رو بترکونن */
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.btn--primary { background: var(--gold); color: #0B0E11; border-color: transparent; }
.btn--buy     { background: var(--success); color: #fff; border-color: transparent; }
.btn--sell    { background: var(--danger); color: #fff; border-color: transparent; }

/* نوار پیشرفت تا تارگت (معادل گرافیکی نوار متنی مرحله ۵) */
.progress { height: 6px; background: var(--divider); border-radius: var(--radius-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--success); border-radius: inherit; }

/* ============================================================
   دسترس‌پذیری
   ============================================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ۱۴.۰۹ — اگه کاربر کاهش حرکت رو فعال کرده باشه، همه‌ی انیمیشن‌ها عملاً خاموش می‌شن.
   این یه انتخاب سلیقه‌ای نیست؛ برای کاربرهایی که حرکت باعث سرگیجه‌شون می‌شه، لازمه. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}