/* ============================================================
   DESIGN TOKENS — برگرفته از Mozilla Flare Design System
   ============================================================
   استفاده: این فایل را در ابتدای CSS پروژه‌ات import کن.
   هر توکن یک متغیر CSS است و می‌توانی آن‌ها را override کنی.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     🎨 COLORS — رنگ‌ها
  ────────────────────────────────────────── */

  /* Neutrals */
  --color-white:           #ffffff;
  --color-white-90:        hsla(0, 0%, 100%, 0.9);
  --color-grey-100:        #f9f9fb;
  --color-grey-200:        #e8e8e8;
  --color-grey-500:        #7b7a82;
  --color-black:           #000000;
  --color-black-16:        rgba(0, 0, 0, 0.16);
  --color-black-45:        rgba(0, 0, 0, 0.45);

  /* Dark scale */
  --color-dark-100:        #42414d;
  --color-dark-200:        #23222b;
  --color-dark-300:        #1c1b22;
  --color-dark-400:        #15141a;   /* متن اصلی تاریک */
  --color-dark-400-72:     rgba(21, 20, 26, 0.72);
  --color-dark-400-90:     rgba(21, 20, 26, 0.90);

  /* Purple scale */
  --color-purple-900:      #210340;   /* dark purple */
  --color-purple-900-22:   rgba(33, 3, 64, 0.22);
  --color-purple-900-30:   rgba(33, 3, 64, 0.30);
  --color-purple-900-50:   rgba(33, 3, 64, 0.40);
  --color-purple-800:      #150226;
  --color-purple-700:      #3a0f6e;   /* brand purple */
  --color-purple-600:      #4c2489;   /* medium purple */
  --color-purple-500:      #6132bc;   /* link purple */
  --color-purple-400:      #7543e3;   /* light purple / primary action */
  --color-purple-400-20:   rgba(117, 67, 227, 0.20);
  --color-purple-400-40:   rgba(117, 67, 227, 0.40);
  --color-purple-400-60:   rgba(117, 67, 227, 0.60);
  --color-purple-400-80:   rgba(117, 67, 227, 0.80);
  --color-purple-300:      #ae89ff;   /* nav icon */
  --color-purple-200:      #c7a8ff;
  --color-purple-100:      #dfc9ff;

  /* Soft / background tints */
  --color-soft-purple-100: #f1e7f8;
  --color-soft-purple-200: #e4d8fc;
  --color-soft-magenta:    #ffeafe;
  --color-soft-magenta-20: rgba(255, 234, 254, 0.20);
  --color-cream:           #fcf5f0;

  /* Semantic — Status */
  --color-error:           #ff453f;
  --color-error-dark:      #55031c;
  --color-error-darkest:   #31000e;
  --color-error-bg:        #ffeae9;

  --color-warning:         #ff6d00;
  --color-warning-dark:    #661c19;
  --color-warning-darkest: #330505;
  --color-warning-bg:      #fff2e5;

  --color-success:         #144a27;
  --color-success-darkest: #031c00;
  --color-success-bg:      #deffd6;

  --color-info-bg:         #fcf5f0;   /* soft yellow */


  /* ──────────────────────────────────────────
     🌈 GRADIENTS — گرادیان‌ها
  ────────────────────────────────────────── */

  --gradient-brand:        linear-gradient(90deg, #ffeb49, #f60 50%, #fb2872);
  --gradient-world:        linear-gradient(90deg, #e752ff, #271aff);
  --gradient-privacy:      linear-gradient(90deg, #ae49ec 0%, var(--color-purple-900) 100%);
  --gradient-purple-radial:radial-gradient(122.66% 137.66% at 50% 0%, #ae49ec 0%, #210340 100%);
  --gradient-purple-hero:  radial-gradient(74.06% 118.24% at 50% -18.24%, var(--color-purple-400) 0%, var(--color-purple-900) 100%);
  --gradient-subnav-dark:  linear-gradient(0deg, var(--color-purple-900) 0%, #3a0f6e 100%);
  --gradient-subnav-light: linear-gradient(0deg, var(--color-white) 0%, var(--color-grey-200) 100%);
  --gradient-overlay-light:linear-gradient(180deg, var(--color-white-90) 0%, var(--color-white) 100%);
  --gradient-overlay-dark: linear-gradient(180deg, var(--color-dark-400-72) 0%, var(--color-dark-400-90) 100%);
  --gradient-soft-purple:  linear-gradient(180deg, rgba(241,231,248,0.64) 0%, var(--color-white) 100%);
  --gradient-gold:         linear-gradient(180deg, #ffe500, #ff980e);
  --gradient-magic:        linear-gradient(116.61deg, #321bfd -17.87%, #cf30e2 52.93%, #f90 89.02%, #f5c451 109.44%);


  /* ──────────────────────────────────────────
     📐 SPACING — فاصله‌گذاری
  ────────────────────────────────────────── */

  --space-2xs:   2px;
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-2xl:   32px;
  --space-3xl:   40px;


  /* ──────────────────────────────────────────
     📏 LAYOUT — چیدمان
  ────────────────────────────────────────── */

  --layout-3xs:  24px;
  --layout-2xs:  32px;
  --layout-xs:   48px;
  --layout-sm:   64px;
  --layout-md:   80px;
  --layout-lg:   128px;
  --layout-xl:   160px;
  --layout-2xl:  200px;

  /* Max widths */
  --width-content:         725px;
  --width-content-lg:      934px;
  --width-wide:            1170px;
  --width-full:            1440px;
  --width-mobile:          393px;


  /* ──────────────────────────────────────────
     🔵 BORDER RADIUS — گوشه‌های گرد
  ────────────────────────────────────────── */

  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    24px;
  --radius-xl:    48px;
  --radius-2xl:   80px;
  --radius-3xl:   128px;
  --radius-pill:  9999px;


  /* ──────────────────────────────────────────
     🔤 TYPOGRAPHY — تایپوگرافی
  ────────────────────────────────────────── */

  /* Font families */
  --font-heading:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* Font sizes */
  --text-xs:    12px;   /* 0.75rem */
  --text-sm:    14px;   /* 0.875rem */
  --text-md:    16px;   /* 1rem — base */
  --text-lg:    18px;   /* 1.125rem */
  --text-xl:    20px;   /* 1.25rem */
  --text-2xl:   24px;   /* 1.5rem */
  --text-3xl:   32px;   /* 2rem */
  --text-4xl:   40px;   /* 2.5rem */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line heights */
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;


  /* ──────────────────────────────────────────
     ⚡ TRANSITIONS — انیمیشن و ترنزیشن
  ────────────────────────────────────────── */

  --transition-fast:   0.15s ease;
  --transition-base:   0.20s ease;
  --transition-slow:   0.30s ease;


  /* ──────────────────────────────────────────
     🪟 SHADOWS — سایه‌ها
  ────────────────────────────────────────── */

  --shadow-xs:  0 1px 2px var(--color-black-16);
  --shadow-sm:  0 2px 8px var(--color-black-16);
  --shadow-md:  0 4px 16px var(--color-black-16);
  --shadow-lg:  0 8px 32px var(--color-black-45);
  --shadow-xl:  0 16px 48px var(--color-black-45);
  --shadow-purple-sm: 0 4px 16px var(--color-purple-400-40);
  --shadow-purple-lg: 0 8px 32px var(--color-purple-400-60);


  /* ──────────────────────────────────────────
     🎯 SEMANTIC TOKENS — توکن‌های معنایی
     (این‌ها را برای light mode پیش‌فرض تعریف می‌کنیم)
  ────────────────────────────────────────── */

  /* Text */
  --text-primary:       var(--color-dark-400);
  --text-secondary:     var(--color-grey-500);
  --text-inverse:       var(--color-white);
  --text-brand:         var(--color-purple-500);
  --text-link:          var(--color-purple-500);
  --text-link-hover:    var(--color-purple-400);
  --text-error:         var(--color-error);

  /* Background */
  --bg-page:            var(--color-white);
  --bg-surface:         var(--color-grey-100);
  --bg-card:            var(--color-white);
  --bg-overlay:         var(--color-dark-400-72);
  --bg-brand:           var(--color-purple-400);
  --bg-brand-hover:     var(--color-purple-500);
  --bg-code:            var(--color-soft-purple-200);

  /* Border */
  --border-default:     var(--color-grey-200);
  --border-brand:       var(--color-purple-400);
  --border-strong:      var(--color-dark-100);

  /* Interactive / Button */
  --btn-primary-bg:     var(--color-purple-400);
  --btn-primary-bg-hover: var(--color-purple-500);
  --btn-primary-text:   var(--color-white);
  --btn-radius:         var(--radius-pill);
  --btn-padding-y:      var(--space-sm);
  --btn-padding-x:      var(--space-xl);

  /* Focus ring */
  --focus-ring:         0 0 0 3px var(--color-purple-400-60);

}


/* ──────────────────────────────────────────
   🌙 DARK MODE — حالت تاریک
   (فقط توکن‌های معنایی override می‌شن)
────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:       var(--color-grey-100);
    --text-secondary:     var(--color-grey-500);
    --text-link:          var(--color-purple-300);
    --text-link-hover:    var(--color-purple-200);

    --bg-page:            var(--color-dark-300);
    --bg-surface:         var(--color-dark-400);
    --bg-card:            var(--color-dark-200);
    --bg-brand:           var(--color-purple-400);
    --bg-brand-hover:     var(--color-purple-600);
    --bg-code:            var(--color-purple-900);

    --border-default:     var(--color-dark-100);
    --border-brand:       var(--color-purple-400);
    --border-strong:      var(--color-grey-500);
  }
}


/* ──────────────────────────────────────────
   🛠️ UTILITY CLASSES — کلاس‌های کاربردی
   (اختیاری — می‌توانی برداری)
────────────────────────────────────────── */

/* Typography */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }
.text-3xl     { font-size: var(--text-3xl); }
.text-4xl     { font-size: var(--text-4xl); }

.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* Spacing helpers */
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Radius helpers */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

/* Color utilities */
.text-brand   { color: var(--text-brand); }
.text-muted   { color: var(--text-secondary); }
.bg-brand     { background-color: var(--bg-brand); }
.bg-surface   { background-color: var(--bg-surface); }