/* =====================================================================
   بوستینو — سیستمِ طراحیِ مشترک (همون ظاهرِ نسخه‌ی جدید)
   روی همه‌ی صفحه‌ها لود می‌شه: اپ، پنلِ مدیریت، صفحه‌های دوره، نتیجه‌ی پرداخت.
   فقط ظاهره؛ هیچ منطقی به این فایل وابسته نیست.

   ترتیبِ بخش‌ها:
   ۱) فونت‌ها (از خودِ سایت؛ بدونِ CDN)
   ۲) توکن‌های رنگ/سایه/شعاع/حرکت برای تمِ روشن و تیره (html[data-theme])
   ۳) نگاشتِ متغیرهای قدیمیِ اپ و صفحه‌های دوره به توکن‌ها (فقط تمِ روشن؛ تیره همون پالتِ قبلیه)
   ۴) رنگ‌های قدیمیِ پنلِ مدیریت (--adm-*) برای هر دو تم
   ۵) اجزای مشترک: دکمه‌ی تغییرِ تم، بافتِ نویز، ظاهرشدنِ نرم
   ===================================================================== */

/* ---------- ۱) فونت‌ها ---------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF;
}

/* ---------- ۲) توکن‌ها ---------- */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bn-brand-50: #ecfff9; --bn-brand-100: #cffff1; --bn-brand-200: #a0ffe4; --bn-brand-300: #63ffd5;
  --bn-brand-400: #2bffc6; --bn-brand-500: #00e8ae; --bn-brand-600: #00bd8f; --bn-brand-700: #009575;
  --bn-brand-800: #06755e; --bn-brand-900: #0a604f; --bn-brand-950: #00372d;

  --bn-bg: #0b0815;
  --bn-surface: #1b1535;
  --bn-surface-2: #221b42;
  --bn-surface-3: #140f26;
  --bn-line: rgba(255, 255, 255, 0.08);
  --bn-line-strong: rgba(255, 255, 255, 0.15);
  --bn-fg: #f4f1ff;
  --bn-fg-muted: #b8b2d9;
  --bn-fg-soft: #8a82b8;
  --bn-accent: #2bffc6;         /* پرکننده (دکمه، نشان، نوار) */
  --bn-accent-ink: #052a21;     /* متن روی پرکننده */
  --bn-accent-text: #2bffc6;    /* وقتی خودِ متن رنگی‌ه */
  --bn-pink: #ff4fd8;
  --bn-pink-text: #ff4fd8;
  --bn-gold: #ffc94a;
  --bn-gold-text: #ffc94a;
  --bn-blue: #6c8cff;
  --bn-blue-text: #8aa3ff;
  --bn-danger: #ff5c7a;
  --bn-ink: #f4f1ff;            /* دکمه‌ی اصلیِ قرصی */
  --bn-ink-fg: #0b0815;
  --bn-glass: rgba(27, 21, 53, 0.58);
  --bn-glass-line: rgba(255, 255, 255, 0.1);
  --bn-footer: #04241e;
  --bn-shadow-rgb: 0 0 0;
  --bn-grain-opacity: 0.06;
  --bn-orb-opacity: 0.55;

  --bn-radius-sm: 14px;
  --bn-radius-md: 22px;
  --bn-radius-lg: 32px;
  --bn-radius-xl: 40px;
  --bn-shadow-soft: 0 1px 2px rgb(var(--bn-shadow-rgb) / 0.08), 0 12px 32px -12px rgb(var(--bn-shadow-rgb) / 0.35);
  --bn-shadow-lift: 0 2px 4px rgb(var(--bn-shadow-rgb) / 0.08), 0 24px 60px -20px rgb(var(--bn-shadow-rgb) / 0.5);
  --bn-glow: 0 18px 50px -16px rgba(43, 255, 198, 0.45);
  --bn-glow-pink: 0 18px 50px -16px rgba(255, 79, 216, 0.4);
  --bn-glow-gold: 0 18px 50px -16px rgba(255, 201, 74, 0.4);
  --bn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bn-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --bn-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bn-blur: blur(20px) saturate(170%);

  /* رنگ‌های «پرکننده» که در هر دو تم روشن و درخشان می‌مونن */
  --fill-teal: #2bffc6;
  --fill-pink: #ff4fd8;
  --fill-gold: #ffc94a;
  --fill-blue: #6c8cff;
  --on-fill: #0b0815;
}

html[data-theme="light"] {
  color-scheme: light;
  --bn-bg: #fbfaf4;
  --bn-surface: #ffffff;
  --bn-surface-2: #f3f1e8;
  --bn-surface-3: #ece9dd;
  --bn-line: rgba(12, 31, 26, 0.09);
  --bn-line-strong: rgba(12, 31, 26, 0.16);
  --bn-fg: #0c1f1a;
  --bn-fg-muted: #45574f;
  --bn-fg-soft: #7b8a84;
  --bn-accent-text: #00866a;
  --bn-pink-text: #c2169c;
  --bn-gold-text: #9a6200;
  --bn-blue-text: #3552d6;
  --bn-danger: #d92d4f;
  --bn-ink: #0b0815;
  --bn-ink-fg: #fbfaf4;
  --bn-glass: rgba(255, 255, 255, 0.66);
  --bn-glass-line: rgba(255, 255, 255, 0.8);
  --bn-footer: #00372d;
  --bn-shadow-rgb: 12 40 33;
  --bn-grain-opacity: 0.045;
  --bn-orb-opacity: 0.3;
  --bn-shadow-soft: 0 1px 2px rgb(var(--bn-shadow-rgb) / 0.05), 0 12px 32px -14px rgb(var(--bn-shadow-rgb) / 0.2);
  --bn-shadow-lift: 0 2px 4px rgb(var(--bn-shadow-rgb) / 0.05), 0 24px 60px -22px rgb(var(--bn-shadow-rgb) / 0.3);
}

/* ---------- ۳) نگاشتِ متغیرهای قدیمیِ اپ و صفحه‌های دوره ----------
   تمِ تیره = دقیقاً همون پالتِ فعلی (دست نخورده). فقط شعاع‌ها گردتر می‌شن.
   تمِ روشن: پس‌زمینه‌ی کرمی، متنِ تیره، و رنگ‌های نئون برای «متن» یه درجه تیره‌تر تا خوانا باشن
   (پرکننده‌ها با --fill-* همون نئونِ درخشان می‌مونن). */
/* رنگ‌هایی که قبلاً مستقیم (hex/rgba) نوشته شده بودن و حالا متغیرن — تیره دقیقاً همون مقدارِ قبلی */
:root, html[data-theme="dark"] {
  --bg-plum: #2A1B3F;
  --tint-1: rgba(255, 255, 255, 0.05);
  --tint-2: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] {
  --bg-plum: #f6f0f5;
  --tint-1: rgba(12, 31, 26, 0.035);
  --tint-2: rgba(12, 31, 26, 0.06);
}
html[data-theme] {
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
}
html[data-theme="light"] {
  --bg-void: #fbfaf4;
  --bg-deep: #f3f1e8;
  --bg-panel: #ffffff;
  --bg-panel-raised: #f6f4ec;
  --bg-card: #ffffff;
  --border-soft: rgba(12, 31, 26, 0.09);
  --border-mid: rgba(12, 31, 26, 0.16);

  --neon-teal: #00997a;
  --neon-teal-dim: #7fdcc6;
  --neon-teal-glow: rgba(0, 190, 150, 0.22);
  --neon-pink: #c2169c;
  --neon-pink-dim: #eaa2d9;
  --neon-pink-glow: rgba(255, 79, 216, 0.2);
  --gold: #a86b00;
  --gold-dim: #e7c070;
  --gold-glow: rgba(255, 201, 74, 0.28);
  --blue-soft: #4a67e8;

  --text-hi: #0c1f1a;
  --text-mid: #45574f;
  --text-low: #7b8a84;
  --danger: #d92d4f;

  /* لایه‌ی شیشه‌ایِ قبلی در تمِ روشن */
  --lg-tint: rgba(255, 255, 255, 0.62);
  --lg-tint-strong: rgba(255, 255, 255, 0.78);
  --lg-stroke: rgba(12, 31, 26, 0.1);
  --lg-stroke-hi: rgba(12, 31, 26, 0.18);

  /* reserve.html (پالتِ سبزِ خودش) */
  --card: #ffffff;
  --border: rgba(12, 31, 26, 0.09);
  --g0: #fbfaf4;
  --g1: #f3f1e8;
  --g2: #ffffff;
  --g3: #f6f4ec;
}

/* ---------- ۴) پنلِ مدیریت: رنگ‌هایی که قبلاً hex بودن ---------- */
:root, html[data-theme="dark"] {
  --adm-bg: #0B0815;
  --adm-deep: #140F26;
  --adm-panel: #1B1535;
  --adm-raised: #221B42;
  --adm-text: #F5F3FF;
  --adm-mid: #B8B0D9;
  --adm-low: #756C99;
  --adm-teal: #2BFFC6;
  --adm-teal-dim: #1E9E7D;
  --adm-pink: #FF4FD8;
  --adm-pink-dim: #B83AA0;
  --adm-gold: #FFC94A;
  --adm-blue: #6C8CFF;
  --adm-red: #FF5C7A;
  --adm-line: rgba(255, 255, 255, 0.08);
  --adm-line-soft: rgba(255, 255, 255, 0.06);
  --adm-line-strong: rgba(255, 255, 255, 0.14);
  --adm-input-fg: #ffffff;
}
html[data-theme="light"] {
  --adm-bg: #fbfaf4;
  --adm-deep: #f3f1e8;
  --adm-panel: #ffffff;
  --adm-raised: #f6f4ec;
  --adm-text: #0c1f1a;
  --adm-mid: #45574f;
  --adm-low: #7b8a84;
  --adm-teal: #00866a;
  --adm-teal-dim: #7fdcc6;
  --adm-pink: #c2169c;
  --adm-pink-dim: #eaa2d9;
  --adm-gold: #9a6200;
  --adm-blue: #3552d6;
  --adm-red: #d92d4f;
  --adm-line: rgba(12, 31, 26, 0.09);
  --adm-line-soft: rgba(12, 31, 26, 0.07);
  --adm-line-strong: rgba(12, 31, 26, 0.16);
  --adm-input-fg: #0c1f1a;
}

/* ---------- ۵) اجزای مشترک ---------- */
html { -webkit-text-size-adjust: 100%; }
::selection { background: rgba(43, 255, 198, 0.35); color: inherit; }

/* دکمه‌ی تغییرِ تم (با اسکریپتِ theme.js به نوارها اضافه می‌شه) */
.bn-theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--bn-line); background: var(--bn-surface);
  color: var(--bn-fg-muted); cursor: pointer; font: inherit;
  transition: transform .5s var(--bn-spring), color .2s, background-color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.bn-theme-toggle:hover { color: var(--bn-fg); border-color: var(--bn-line-strong); }
.bn-theme-toggle:active { transform: scale(.88); transition-duration: .12s; }
.bn-theme-toggle svg { width: 18px; height: 18px; transition: transform .6s var(--bn-spring), opacity .3s; }
.bn-theme-toggle .bn-sun { position: absolute; }
html[data-theme="dark"] .bn-theme-toggle .bn-moon,
html:not([data-theme="dark"]) .bn-theme-toggle .bn-sun { transform: translateY(22px) rotate(-70deg); opacity: 0; }

/* جابه‌جاییِ نرمِ رنگ‌ها لحظه‌ی عوض‌کردنِ تم */
html.bn-theme-anim, html.bn-theme-anim *, html.bn-theme-anim *::before, html.bn-theme-anim *::after {
  transition: background-color .45s var(--bn-smooth), border-color .45s var(--bn-smooth), color .3s var(--bn-smooth), fill .3s, box-shadow .45s !important;
}

/* بافتِ نویزِ خیلی کم‌رنگ روی کلِ صفحه (SVG داخلی؛ فایلِ خارجی نداره) */
.bn-grain::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--bn-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ظاهرشدنِ نرم از تاری (برای صفحه‌های PHP؛ کلاس‌ها رو ui.js اضافه/حذف می‌کنه) */
.bn-rv { animation: bnBlurIn .8s var(--bn-smooth) both paused; }
.bn-rv.bn-in { animation-play-state: running; }
@keyframes bnBlurIn { from { opacity: 0; filter: blur(10px); transform: translateY(14px); } }
@media (max-width: 600px) { @keyframes bnBlurIn { from { opacity: 0; filter: blur(6px); transform: translateY(10px); } } }

@media (prefers-reduced-motion: reduce) {
  .bn-rv { animation: none !important; }
  html.bn-theme-anim * { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --bn-glass: var(--bn-surface); }
}