/* ════════════════════════════════════════════════════════════════════════
   FreeGPT Brand Tokens — Rev. 7.1 (2026-05-24)
   Single source of truth for colors / typography / spacing / shadows
   استخراج شده از apps/web/design/_imported_v2 + brand kit رسمی
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand surfaces (dark) ──────────────────────────────── */
  --fg-bg-deep:       #07060d;
  --fg-bg:            #0a0a0f;
  --fg-bg-elevated:   #11101d;
  --fg-bg-elevated-2: #1a1033;
  --fg-surface-1:     rgba(255, 255, 255, 0.03);
  --fg-surface-2:     rgba(255, 255, 255, 0.06);
  --fg-surface-3:     rgba(255, 255, 255, 0.10);
  --fg-border:        rgba(255, 255, 255, 0.08);
  --fg-border-strong: rgba(255, 255, 255, 0.18);

  /* ── Brand accent palette ───────────────────────────────── */
  --fg-cyan:    #38bdf8;
  --fg-blue:    #3b82f6;
  --fg-violet:  #8b5cf6;
  --fg-magenta: #d946ef;
  --fg-pink:    #ec4899;
  --fg-amber:   #fbbf24;
  --fg-emerald: #10b981;
  --fg-red:     #ef4444;

  /* ── Text ───────────────────────────────────────────────── */
  --fg-text:        #f9fafb;
  --fg-text-muted:  rgba(255, 255, 255, 0.65);
  --fg-text-faint:  rgba(255, 255, 255, 0.45);
  --fg-text-on-accent: #ffffff;

  /* ── Gradients ──────────────────────────────────────────── */
  --fg-grad-brand:
    linear-gradient(135deg, #38bdf8 0%, #8b5cf6 50%, #d946ef 100%);
  --fg-grad-brand-soft:
    linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.18), rgba(217,70,239,.18));
  --fg-grad-aurora:
    radial-gradient(60% 50% at 15% 20%, rgba(56,189,248,.22) 0%, transparent 60%),
    radial-gradient(55% 45% at 85% 25%, rgba(139,92,246,.28) 0%, transparent 65%),
    radial-gradient(70% 55% at 50% 90%, rgba(217,70,239,.18) 0%, transparent 65%),
    linear-gradient(180deg, #07060d 0%, #0a0814 50%, #07060d 100%);

  /* ── Glow shadows ───────────────────────────────────────── */
  --fg-glow-cyan:    0 0 40px -10px rgba(56,189,248,.5), 0 0 80px -20px rgba(56,189,248,.3);
  --fg-glow-violet:  0 0 40px -10px rgba(139,92,246,.5), 0 0 80px -20px rgba(139,92,246,.3);
  --fg-glow-brand:   0 0 30px -8px rgba(139,92,246,.45), 0 0 60px -16px rgba(56,189,248,.3), 0 0 90px -24px rgba(217,70,239,.25);
  --fg-shadow-card:  0 8px 32px rgba(7,6,13,.4);
  --fg-shadow-card-hover: 0 16px 48px rgba(7,6,13,.6);

  /* ── Typography ─────────────────────────────────────────── */
  --fg-font-fa:  "Vazirmatn", "Raman-Bold", "B Elham-Regular", "Tahoma", ui-sans-serif, system-ui, sans-serif;
  --fg-font-en:  "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
  --fg-font-mono:"JetBrains Mono", "Fira Code", "Geist Mono", ui-monospace, monospace;

  --fg-fs-xs:   12px;
  --fg-fs-sm:   13px;
  --fg-fs-base: 14px;
  --fg-fs-md:   16px;
  --fg-fs-lg:   18px;
  --fg-fs-xl:   22px;
  --fg-fs-2xl:  28px;
  --fg-fs-3xl:  36px;
  --fg-fs-4xl:  48px;
  --fg-fs-5xl:  64px;

  --fg-fw-light:    300;
  --fg-fw-regular:  400;
  --fg-fw-medium:   500;
  --fg-fw-semibold: 600;
  --fg-fw-bold:     700;
  --fg-fw-black:    800;

  /* ── Spacing scale ──────────────────────────────────────── */
  --fg-s-1:  4px;
  --fg-s-2:  8px;
  --fg-s-3:  12px;
  --fg-s-4:  16px;
  --fg-s-5:  20px;
  --fg-s-6:  24px;
  --fg-s-7:  32px;
  --fg-s-8:  40px;
  --fg-s-9:  48px;
  --fg-s-10: 64px;
  --fg-s-11: 80px;
  --fg-s-12: 96px;

  /* ── Radius ─────────────────────────────────────────────── */
  --fg-r-sm:   6px;
  --fg-r-md:   10px;
  --fg-r-lg:   14px;
  --fg-r-xl:   20px;
  --fg-r-2xl:  28px;
  --fg-r-pill: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --fg-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --fg-ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fg-dur-1: .15s;
  --fg-dur-2: .25s;
  --fg-dur-3: .4s;
  --fg-dur-4: .6s;

  /* ── Tier colors (شخصی / کاری / حرفه‌ای / خانواده) ──── */
  --fg-tier-free:     #6b7280;
  --fg-tier-personal: #38bdf8;
  --fg-tier-business: #8b5cf6;
  --fg-tier-pro:      #d946ef;
  --fg-tier-family:   #fbbf24;

  /* ── Status / "به‌زودی" ─────────────────────────────────── */
  --fg-soon-bg:   rgba(251, 191, 36, 0.10);
  --fg-soon-fg:   #fbbf24;
  --fg-soon-bord: rgba(251, 191, 36, 0.35);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fg-font-fa);
  font-size: var(--fg-fs-base);
  line-height: 1.6;
  color: var(--fg-text);
  background: var(--fg-bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

[dir="ltr"] { direction: ltr; }
[lang="en"] { font-family: var(--fg-font-en); }

a { color: inherit; text-decoration: none; transition: color var(--fg-dur-1); }
a:hover { color: var(--fg-cyan); }

/* ════════════════════════════════════════════════════════════
   Components
   ════════════════════════════════════════════════════════════ */

/* Surface */
.fg-glass {
  background: linear-gradient(135deg, var(--fg-surface-2) 0%, var(--fg-surface-1) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-r-lg);
}

.fg-glass-strong {
  background: linear-gradient(135deg, var(--fg-surface-3) 0%, var(--fg-surface-1) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--fg-border-strong);
  border-radius: var(--fg-r-lg);
}

/* Brand text gradient */
.fg-text-grad {
  background: var(--fg-grad-brand);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient ring border */
.fg-ring {
  position: relative; isolation: isolate;
  border-radius: inherit;
}
.fg-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56,189,248,.6), rgba(139,92,246,.6), rgba(217,70,239,.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Buttons */
.fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--fg-r-pill);
  font-family: inherit;
  font-size: var(--fg-fs-base);
  font-weight: var(--fg-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--fg-dur-2) var(--fg-ease);
  user-select: none;
  white-space: nowrap;
}

.fg-btn-primary {
  background: var(--fg-grad-brand);
  color: var(--fg-text-on-accent);
  box-shadow: var(--fg-glow-violet);
}
.fg-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--fg-glow-brand);
}

.fg-btn-secondary {
  background: var(--fg-surface-2);
  color: var(--fg-text);
  border-color: var(--fg-border);
}
.fg-btn-secondary:hover {
  background: var(--fg-surface-3);
  border-color: var(--fg-border-strong);
}

.fg-btn-ghost {
  background: transparent;
  color: var(--fg-text-muted);
}
.fg-btn-ghost:hover {
  color: var(--fg-text);
  background: var(--fg-surface-1);
}

.fg-btn-outline {
  background: transparent;
  color: var(--fg-cyan);
  border-color: var(--fg-cyan);
}
.fg-btn-outline:hover {
  background: rgba(56, 189, 248, 0.12);
}

.fg-btn-lg { padding: 14px 28px; font-size: var(--fg-fs-md); }
.fg-btn-sm { padding: 7px 14px; font-size: var(--fg-fs-sm); }

.fg-btn[disabled],
.fg-btn.is-disabled,
.fg-btn-disabled {
  background: var(--fg-surface-1) !important;
  color: var(--fg-text-faint) !important;
  border-color: var(--fg-border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* Badges */
.fg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--fg-r-pill);
  font-size: var(--fg-fs-xs);
  font-weight: var(--fg-fw-medium);
  background: var(--fg-surface-2);
  color: var(--fg-text-muted);
  border: 1px solid var(--fg-border);
  line-height: 1.2;
}
.fg-badge-cyan    { background: rgba(56,189,248,.10); color: var(--fg-cyan);    border-color: rgba(56,189,248,.30); }
.fg-badge-violet  { background: rgba(139,92,246,.10); color: var(--fg-violet);  border-color: rgba(139,92,246,.30); }
.fg-badge-magenta { background: rgba(217,70,239,.10); color: var(--fg-magenta); border-color: rgba(217,70,239,.30); }
.fg-badge-emerald { background: rgba(16,185,129,.10); color: var(--fg-emerald); border-color: rgba(16,185,129,.30); }
.fg-badge-amber   { background: var(--fg-soon-bg);    color: var(--fg-soon-fg); border-color: var(--fg-soon-bord); }

/* "به‌زودی" badge */
.fg-badge-soon {
  background: var(--fg-soon-bg);
  color: var(--fg-soon-fg);
  border: 1px solid var(--fg-soon-bord);
  padding: 5px 12px;
  font-weight: var(--fg-fw-semibold);
}
.fg-badge-soon::before {
  content: "🔒";
  font-size: 1em;
}

/* "ستاره premium" badge */
.fg-badge-premium {
  background: linear-gradient(135deg, rgba(217,70,239,.18), rgba(139,92,246,.14));
  color: var(--fg-magenta);
  border-color: rgba(217,70,239,.35);
  font-weight: var(--fg-fw-semibold);
}
.fg-badge-premium::before { content: "⭐"; }

/* Cards */
.fg-card {
  background: var(--fg-surface-1);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-r-xl);
  padding: var(--fg-s-6);
  transition: all var(--fg-dur-2) var(--fg-ease);
}
.fg-card:hover {
  border-color: var(--fg-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--fg-shadow-card-hover);
}

.fg-card-glass {
  background: linear-gradient(135deg, var(--fg-surface-2) 0%, var(--fg-surface-1) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--fg-border);
  border-radius: var(--fg-r-xl);
  padding: var(--fg-s-6);
}

/* Coming-soon overlay (روی هر container) */
.fg-soon-overlay {
  position: relative;
  pointer-events: none;
}
.fg-soon-overlay > * {
  filter: grayscale(0.6) opacity(0.45);
}
.fg-soon-overlay::after {
  content: attr(data-soon-text, "به زودی 🔒");
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(7,6,13,.25), rgba(7,6,13,.55));
  font-size: var(--fg-fs-lg);
  font-weight: var(--fg-fw-bold);
  color: var(--fg-soon-fg);
  border-radius: inherit;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  letter-spacing: 0.5px;
  backdrop-filter: blur(2px);
  border: 2px dashed var(--fg-soon-bord);
}

/* Inputs */
.fg-input,
.fg-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--fg-r-md);
  background: var(--fg-surface-1);
  border: 1px solid var(--fg-border);
  color: var(--fg-text);
  font-family: inherit;
  font-size: var(--fg-fs-md);
  outline: none;
  transition: all var(--fg-dur-1) var(--fg-ease);
}
.fg-input:focus,
.fg-textarea:focus {
  border-color: var(--fg-violet);
  background: var(--fg-surface-2);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18);
}
.fg-input::placeholder { color: var(--fg-text-faint); }

/* Code */
.fg-code {
  font-family: var(--fg-font-mono);
  font-size: 0.92em;
  background: var(--fg-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--fg-cyan);
  unicode-bidi: plaintext;
}

/* Persian number normalization */
.fg-num {
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}

/* Aurora bg */
.fg-aurora-bg {
  background: var(--fg-grad-aurora);
  background-size: 200% 200%;
  animation: fg-aurora-shift 22s ease-in-out infinite alternate;
}

@keyframes fg-aurora-shift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 100%; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fg-bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fg-cyan), var(--fg-violet));
  border-radius: 10px;
  border: 2px solid var(--fg-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--fg-cyan), var(--fg-magenta)); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fg-aurora-bg { animation: none !important; }
}