/* =========================================================================
   SOKAN — Design Tokens · v1.0
   Dark Luxury · Gold / Silver / Deep Black
   همهٔ مقادیر رنگ با کنتراست سنجیده شده‌اند (WCAG 2.2).
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ── ۱. پالت پایه (Primitives) ─────────────────────────────────────
     مقیاس خنثی «گرم» است تا با طلایی هم‌خانواده باشد؛ نقرهٔ سرد
     کنار طلایی، ارزان و صنعتی دیده می‌شود. */

  --s-black:        #000000;
  --s-ink-950:      #080706;   /* پست‌ترین لایه: حاشیهٔ صفحه */
  --s-ink-900:      #0A0908;   /* بوم اصلی (Canvas) */
  --s-ink-850:      #0F0D0B;
  --s-ink-800:      #14120F;   /* سطح کارت (Surface) */
  --s-ink-700:      #1B1815;   /* سطح برجسته (Raised) */
  --s-ink-600:      #26221D;   /* سطح تعاملی / hover */
  --s-ink-500:      #332E27;
  --s-ink-400:      #4F4940;
  --s-ink-300:      #6E6659;   /* متن غیرفعال */
  --s-ink-200:      #8F887B;   /* متن کم‌اهمیت */
  --s-ink-100:      #BDB6A8;   /* متن ثانویه */
  --s-ink-50:       #EDE8DE;
  --s-paper:        #F6F3EC;   /* متن اصلی — سفیدِ گرم */

  --s-gold-50:      #FCF7E3;
  --s-gold-100:     #F9EDBE;
  --s-gold-200:     #F3D98B;
  --s-gold-300:     #E8C547;
  --s-gold-400:     #DDBB3F;
  --s-gold-500:     #D4AF37;   /* برند */
  --s-gold-600:     #C9A227;   /* فشرده‌شده */
  --s-gold-700:     #A8841E;
  --s-gold-800:     #8A6D1E;
  --s-gold-900:     #4E3C0D;

  --s-silver-200:   #D8D8D8;
  --s-silver-300:   #C9C9C9;
  --s-silver-400:   #B0B0B0;
  --s-silver-500:   #8F8F8F;

  /* ── ۲. رنگ‌های کارکردی ───────────────────────────────────────────
     فقط برای وضعیت و داده. هرگز برای تزئین. */

  --s-success:      #7FB39A;
  --s-warning:      #E3B341;
  --s-danger:       #E07A6A;   /* متن و آیکون روی تیرگی */
  --s-danger-deep:  #8B3A3A;   /* فقط پس‌زمینهٔ هشدار پرشده */
  --s-info:         #8FA9C9;

  /* ── ۳. سطوح (Surfaces) ──────────────────────────────────────────── */

  --bg-canvas:      var(--s-ink-900);
  --bg-sunken:      var(--s-ink-950);
  --bg-surface:     var(--s-ink-800);
  --bg-raised:      var(--s-ink-700);
  --bg-hover:       var(--s-ink-600);
  --bg-input:       #100E0C;
  --bg-gold-tint:   rgba(212, 175, 55, 0.08);
  --bg-gold-tint-strong: rgba(212, 175, 55, 0.14);
  --bg-danger-soft: rgba(139, 58, 58, 0.18);
  --bg-success-soft: rgba(127, 179, 154, 0.12);
  --bg-warning-soft: rgba(227, 179, 65, 0.12);
  --bg-info-soft:   rgba(143, 169, 201, 0.12);

  /* ── ۴. متن (Foreground) ─────────────────────────────────────────── */

  --fg-primary:     var(--s-paper);      /* 17.9:1 روی بوم */
  --fg-secondary:   var(--s-ink-100);    /*  9.9:1 */
  --fg-tertiary:    var(--s-ink-200);    /*  5.7:1 — حداقل برای متن کوچک */
  --fg-disabled:    var(--s-ink-300);    /*  3.0:1 — فقط غیرفعال */
  --fg-inverse:     var(--s-ink-900);
  --fg-gold:        var(--s-gold-500);   /*  9.5:1 */
  --fg-gold-strong: var(--s-gold-300);   /* 11.9:1 */
  --fg-success:     var(--s-success);
  --fg-warning:     var(--s-warning);
  --fg-danger:      var(--s-danger);
  --fg-info:        var(--s-info);

  /* ── ۵. خطوط و مرزها ─────────────────────────────────────────────── */

  --border-subtle:  rgba(237, 232, 222, 0.08);
  --border-default: rgba(237, 232, 222, 0.14);
  --border-strong:  rgba(237, 232, 222, 0.24);
  --border-gold:    rgba(212, 175, 55, 0.35);
  --border-gold-soft: rgba(212, 175, 55, 0.16);
  --border-danger:  rgba(224, 122, 106, 0.35);

  /* ── ۶. تأکید (Accent) ───────────────────────────────────────────── */

  --accent:         var(--s-gold-500);
  --accent-hover:   var(--s-gold-300);
  --accent-active:  var(--s-gold-600);
  --accent-fg:      var(--s-ink-900);
  --focus-ring:     rgba(232, 197, 71, 0.55);
  --selection:      rgba(212, 175, 55, 0.28);

  /* ── ۷. گرادیان‌های متالیک ────────────────────────────────────────
     فلزیت از «چند توقف» می‌آید، نه از یک رنگ روشن. زاویه ۱۳۵° با
     یک هایلایت باریک در مرکز. */

  --grad-gold: linear-gradient(
    135deg,
    #6E5410 0%,
    #A8841E 14%,
    #D4AF37 32%,
    #F3D98B 47%,
    #D4AF37 60%,
    #A8841E 82%,
    #6E5410 100%
  );

  --grad-gold-hover: linear-gradient(
    135deg,
    #7A5F15 0%,
    #C9A227 18%,
    #F9EDBE 48%,
    #DDBB3F 62%,
    #A8841E 84%,
    #7A5F15 100%
  );

  --grad-silver: linear-gradient(
    135deg,
    #6F6F6F 0%,
    #A8A8A8 22%,
    #E8E8E8 46%,
    #BFBFBF 60%,
    #8F8F8F 82%,
    #6F6F6F 100%
  );

  --grad-surface: linear-gradient(180deg, #14120F 0%, #0E0C0A 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
  --grad-vignette: radial-gradient(1100px 520px at 50% -12%, rgba(212, 175, 55, 0.10), transparent 62%);

  /* ── ۸. ارتفاع و سایه ─────────────────────────────────────────────
     در این سیستم عمق از «مرز + روشنایی سطح» می‌آید، نه سایهٔ سنگین. */

  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card: var(--shadow-inset-top), 0 24px 60px -40px rgba(0, 0, 0, 0.9);
  --shadow-modal: 0 40px 120px -40px rgba(0, 0, 0, 0.95);
  --glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 14px 44px -14px rgba(212, 175, 55, 0.35);
  --shadow-btn-gold: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.35),
                     0 10px 24px -12px rgba(212, 175, 55, 0.45);

  /* ── ۹. شعاع گوشه ────────────────────────────────────────────────── */

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* ── ۱۰. فاصله‌گذاری (پایه ۴px) ─────────────────────────────────── */

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* ── ۱۱. تایپوگرافی ──────────────────────────────────────────────── */

  --font-fa: "Vazirmatn", "SF Pro Text", Tahoma, sans-serif;
  --font-ui: "Inter", "Vazirmatn", -apple-system, sans-serif;
  --font-display: "Cinzel", "Times New Roman", serif;  /* فقط لوگو و تیتر برند */
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 11.5px;   --lh-xs: 18px;
  --text-sm: 12.5px;   --lh-sm: 20px;
  --text-base: 14.5px; --lh-base: 26px;   /* فارسی به line-height بیشتری نیاز دارد */
  --text-md: 16px;     --lh-md: 28px;
  --text-lg: 18px;     --lh-lg: 30px;
  --text-xl: 22px;     --lh-xl: 32px;
  --text-2xl: 28px;    --lh-2xl: 40px;
  --text-3xl: 36px;    --lh-3xl: 48px;
  --text-metric: 40px; --lh-metric: 44px;

  --tracking-caps: 0.16em;   /* برچسب‌های لاتین کوچک */
  --tracking-tight: -0.01em;

  /* ── ۱۲. حرکت ────────────────────────────────────────────────────── */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
}

/* ── حالت‌های سراسری ──────────────────────────────────────────────── */

::selection {
  background: var(--selection);
  color: var(--fg-primary);
}

:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 197, 71, 0.12);
}

/* روی دکمهٔ طلایی، حلقهٔ طلایی دیده نمی‌شود؛ حلقه باید روشن باشد. */
.on-gold:focus-visible {
  outline-color: rgba(10, 9, 8, 0.75);
  box-shadow: 0 0 0 4px rgba(246, 243, 236, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}