/* ============================================================
   یادگار درخشان آریا — Design Tokens: Base Layer
   tokens.base.css  ·  v1.0.0
   ------------------------------------------------------------
   این فایل در هر چهار پروژه یکسان است و هرگز per-project
   تغییر نمی‌کند. تفاوت برندها فقط در فایل brand.*.css است.

   ترتیب بارگذاری:
     1) tokens.base.css
     2) brand.<project>.css
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---------- Neutral ramp (shared, never overridden) ---------- */
  --color-neutral-50: #F6F7F8;
  --color-neutral-100: #EAEBED;
  --color-neutral-200: #D2D4D7;
  --color-neutral-300: #BBBEC2;
  --color-neutral-400: #A4A8AE;
  --color-neutral-500: #8E9399;
  --color-neutral-600: #72777D;
  --color-neutral-700: #575C61;
  --color-neutral-800: #3E4247;
  --color-neutral-900: #272A2D;
  --color-neutral-950: #1C1E21;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ---------- Semantic ramps (shared) ---------- */
  --color-success-50: #EEFBF1;
  --color-success-100: #DAF1E0;
  --color-success-200: #B4DEBF;
  --color-success-300: #8CCA9E;
  --color-success-400: #62B67E;
  --color-success-500: #38A161;
  --color-success-600: #0F8A4A;
  --color-success-700: #006E32;
  --color-success-800: #00511E;
  --color-success-900: #00360D;
  --color-success-950: #00280A;

  --color-warning-50: #FFF5EB;
  --color-warning-100: #FEE9D7;
  --color-warning-200: #F8D2B1;
  --color-warning-300: #F1BA8A;
  --color-warning-400: #E8A363;
  --color-warning-500: #DC8C3D;
  --color-warning-600: #C97A22;
  --color-warning-700: #B4690E;
  --color-warning-800: #824200;
  --color-warning-900: #511F00;
  --color-warning-950: #361300;

  --color-danger-50: #FFF1EE;
  --color-danger-100: #FFDFD9;
  --color-danger-200: #FFBBB3;
  --color-danger-300: #FB968C;
  --color-danger-400: #F07067;
  --color-danger-500: #DF4B45;
  --color-danger-600: #C42B2B;
  --color-danger-700: #A30313;
  --color-danger-800: #7F0000;
  --color-danger-900: #5A0000;
  --color-danger-950: #430000;

  --color-info-50: #EEF8FF;
  --color-info-100: #D9ECFF;
  --color-info-200: #B1D3FF;
  --color-info-300: #8ABAFD;
  --color-info-400: #62A1F6;
  --color-info-500: #3C87E9;
  --color-info-600: #1F6FD0;
  --color-info-700: #0054AF;
  --color-info-800: #003B89;
  --color-info-900: #002462;
  --color-info-950: #001B48;

  /* ---------- Typography ---------- */
  --font-sans: "Vazirmatn", "IRANSansX", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Vazirmatn Code", "JetBrains Mono", ui-monospace, monospace;
  /* ارقام: در فارسی ارقام لاتین برای داده و ارقام فارسی برای متن */
  --font-numeric-ui: "tnum" 1, "lnum" 1;

  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */

  /* خط فارسی به line-height بلندتر از لاتین نیاز دارد */
  --leading-tight:   1.35;
  --leading-normal:  1.75;
  --leading-relaxed: 2;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* در فارسی letter-spacing منفی حروف را می‌شکند — همیشه صفر */
  --tracking-normal: 0;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radius ---------- */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;

  /* ---------- Elevation ----------
     بدون آفست افقی، تا در RTL و LTR یکسان دیده شود */
  --shadow-xs: 0 1px 2px rgb(28 30 33 / 0.06);
  --shadow-sm: 0 2px 4px rgb(28 30 33 / 0.07), 0 1px 2px rgb(28 30 33 / 0.05);
  --shadow-md: 0 6px 16px rgb(28 30 33 / 0.09), 0 2px 4px rgb(28 30 33 / 0.05);
  --shadow-lg: 0 16px 40px rgb(28 30 33 / 0.12), 0 4px 8px rgb(28 30 33 / 0.06);

  /* ---------- Control sizing ---------- */
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layout ---------- */
  --container-sm: 40rem;
  --container-md: 56rem;
  --container-lg: 72rem;
  --container-xl: 84rem;
}

/* ============================================================
   ROLE TOKENS — light
   کامپوننت‌ها فقط این‌ها را مصرف می‌کنند، نه رنگ خام را.
   --brand-* در فایل brand.*.css تعریف می‌شود.
   ============================================================ */
:root {
  --surface:          var(--color-white);
  --surface-sunken:   var(--color-neutral-50);
  --surface-raised:   var(--color-white);
  --surface-overlay:  var(--color-white);
  --surface-inverse:  var(--color-neutral-900);

  --border:           var(--color-neutral-200);
  --border-strong:    var(--color-neutral-300);
  --border-inverse:   var(--color-neutral-700);

  --text:             var(--color-neutral-900);
  --text-muted:       var(--color-neutral-700);
  --text-subtle:      var(--color-neutral-600);
  --text-inverse:     var(--color-white);

  --primary:          var(--brand-600);
  --primary-hover:    var(--brand-700);
  --primary-active:   var(--brand-800);
  --primary-fg:       var(--color-white);
  --primary-subtle:   var(--brand-50);
  --primary-subtle-fg:var(--brand-800);
  --primary-border:   var(--brand-200);

  --link:             var(--brand-700);
  --link-hover:       var(--brand-800);
  --focus-ring:       var(--brand-500);

  --success:          var(--color-success-600);
  --success-fg:       var(--color-white);
  --success-subtle:   var(--color-success-50);
  --success-text:     var(--color-success-800);

  --warning:          var(--color-warning-700);
  --warning-fg:       var(--color-white);
  --warning-subtle:   var(--color-warning-50);
  --warning-text:     var(--color-warning-800); /* 700 روی سفید به ۴.۵:۱ نمی‌رسد */

  --danger:           var(--color-danger-600);
  --danger-fg:        var(--color-white);
  --danger-subtle:    var(--color-danger-50);
  --danger-text:      var(--color-danger-700);

  --info:             var(--color-info-600);
  --info-fg:          var(--color-white);
  --info-subtle:      var(--color-info-50);
  --info-text:        var(--color-info-700);
}

/* ============================================================
   ROLE TOKENS — dark
   در تیره، رنگ برند روشن‌تر می‌شود (۳۰۰/۴۰۰) وگرنه کنتراست می‌افتد.
   ============================================================ */
[data-theme="dark"] {
  --surface:          var(--color-neutral-950);
  --surface-sunken:   #141619;
  --surface-raised:   var(--color-neutral-900);
  --surface-overlay:  var(--color-neutral-800);
  --surface-inverse:  var(--color-neutral-50);

  --border:           var(--color-neutral-800);
  --border-strong:    var(--color-neutral-700);
  --border-inverse:   var(--color-neutral-300);

  --text:             var(--color-neutral-100);
  --text-muted:       var(--color-neutral-300);
  --text-subtle:      var(--color-neutral-400);
  --text-inverse:     var(--color-neutral-950);

  --primary:          var(--brand-400);
  --primary-hover:    var(--brand-300);
  --primary-active:   var(--brand-200);
  --primary-fg:       var(--color-neutral-950);
  --primary-subtle:   color-mix(in oklab, var(--brand-400) 16%, var(--color-neutral-950));
  --primary-subtle-fg:var(--brand-200);
  --primary-border:   color-mix(in oklab, var(--brand-400) 32%, var(--color-neutral-950));

  --link:             var(--brand-300);
  --link-hover:       var(--brand-200);
  --focus-ring:       var(--brand-400);

  --success:          var(--color-success-400);
  --success-fg:       var(--color-neutral-950);
  --success-subtle:   color-mix(in oklab, var(--color-success-400) 16%, var(--color-neutral-950));
  --success-text:     var(--color-success-300);

  --warning:          var(--color-warning-400);
  --warning-fg:       var(--color-neutral-950);
  --warning-subtle:   color-mix(in oklab, var(--color-warning-400) 16%, var(--color-neutral-950));
  --warning-text:     var(--color-warning-300);

  --danger:           var(--color-danger-400);
  --danger-fg:        var(--color-neutral-950);
  --danger-subtle:    color-mix(in oklab, var(--color-danger-400) 16%, var(--color-neutral-950));
  --danger-text:      var(--color-danger-300);

  --info:             var(--color-info-400);
  --info-fg:          var(--color-neutral-950);
  --info-subtle:      color-mix(in oklab, var(--color-info-400) 16%, var(--color-neutral-950));
  --info-text:        var(--color-info-300);

  /* سایه در تیره باید تیره‌تر و بازتر باشد */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.50), 0 2px 4px rgb(0 0 0 / 0.30);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.60), 0 4px 8px rgb(0 0 0 / 0.35);
}

/* حالت خودکار: پیروی از تنظیم سیستم وقتی کاربر چیزی انتخاب نکرده */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* ---------- کف کیفیت مشترک ---------- */
:where(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}